CookedMods
Anime Production Enthusiast
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Getting Started
I've used CDN for Bootstrap, Angular JS and Ui-Router so you need internet connection for them to work.
index.html
This is the main page of our app.
We have use Bootstrap to create our navbar and we put ng-class which toggles our active function and we pass the path of the menu as a parameter.
app.js
This contains our angular js scripts. .config is where we set the routes of our app and in .controller, we have our active function which returns active whenever the passed parameter is the same as the current path.
Creating our Paths
The ff are the templates for the paths in this tutorial.
home.html
about.html
blog.html
That ends this tutorial. Happy Coding :)
Download
I've used CDN for Bootstrap, Angular JS and Ui-Router so you need internet connection for them to work.
index.html
This is the main page of our app.
- <!DOCTYPE html>
- <html
ng-app=
"app"
>
- <head
>
- <title
>
Angular JS Toggle Active on Path Change using Ui-Router</
title
>
- <meta
charset
=
"utf-8"
>
- <link
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel
=
"stylesheet"
>
- <script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"
></
script
>
- <script
src
=
"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"
></
script
>
- </
head
>
- <body
ng-controller=
"mainCtrl"
>
- <nav class
=
"navbar navbar-default"
>
- <div
class
=
"container"
>
- <div
class
=
"navbar-header"
>
- <button
type
=
"button"
class
=
"navbar-toggle collapsed"
data-toggle=
"collapse"
data-target
=
"#bs-example-navbar-collapse-1"
aria-expanded=
"false"
>
- <span
class
=
"sr-only"
>
Toggle navigation</
span
>
- <span
class
=
"icon-bar"
></
span
>
- <span
class
=
"icon-bar"
></
span
>
- <span
class
=
"icon-bar"
></
span
>
- </
button
>
- <a
class
=
"navbar-brand"
href
=
"www.sourcecodester.com"
>
SourceCodeSter</
a
>
- </
div
>
- <div
class
=
"collapse navbar-collapse"
id
=
"bs-example-navbar-collapse-1"
>
- <ul
class
=
"nav navbar-nav"
>
- <li
ng-class
=
"active('/home')"
><a
ui-sref=
"home"
>
Home</
a
></
li
>
- <li
ng-class
=
"active('/about')"
><a
ui-sref=
"about"
>
About</
a
></
li
>
- <li
ng-class
=
"active('/blog')"
><a
ui-sref=
"blog"
>
Blog</
a
></
li
>
- </
ul
>
- </
div
>
- </
div
>
- </
nav>
- <div
class
=
"container"
>
- <div
ui-view></
div
>
- </
div
>
- <script
src
=
"app.js"
></
script
>
- </
body
>
- </
html
>
We have use Bootstrap to create our navbar and we put ng-class which toggles our active function and we pass the path of the menu as a parameter.
app.js
This contains our angular js scripts. .config is where we set the routes of our app and in .controller, we have our active function which returns active whenever the passed parameter is the same as the current path.
- var
app =
angular.module
(
'app'
,
[
'ui.router'
]
)
;
- app.config
(
function
(
$stateProvider,
$urlRouterProvider)
{
- $urlRouterProvider.otherwise
(
'/home'
)
;
- $stateProvider
- .state
(
'home'
,
{
- url:
'/home'
,
- templateUrl:
'home.html'
- }
)
- .state
(
'about'
,
{
- url:
'/about'
,
- templateUrl:
'about.html'
,
- }
)
- .state
(
'blog'
,
{
- url:
'/blog'
,
- templateUrl:
'blog.html'
,
- }
)
;
- }
)
;
- app.controller
(
'mainCtrl'
,
function
(
$scope,
$location)
{
- $scope.active
=
function
(
path)
{
- return
(
$location.path
(
)
===
path)
?
'active'
:
''
;
- }
- }
)
;
Creating our Paths
The ff are the templates for the paths in this tutorial.
home.html
about.html
blog.html
That ends this tutorial. Happy Coding :)
Download
You must upgrade your account or reply in the thread to view hidden text.