Javilon06
Fandom Organizer
LEVEL 1
200 XP
Getting Started
I've used CDN for Bootstrap, Angular JS and Angular Route so you need internet connection for them to work.
index.html
This is the main view of our app.
In here, we used Bootstrap navbar to create our menu and we use ng-class to toggle active function that will send our defined parameter. The active function will then compared the sent parameter to the current path and will return active if matched.
app.js
This contains our angular js script. .config is where we setup the each of our path and .controller is where active function is found.
Creating our Path Templates
The ff. are the template for our route.
home.html
about.html
blog.html
That ends this tutorial. Happy Coding :)
I've used CDN for Bootstrap, Angular JS and Angular Route so you need internet connection for them to work.
index.html
This is the main view of our app.
- <!DOCTYPE html>
- <html
ng-app=
"app"
>
- <head
>
- <title
>
Angular JS Toggle Active Class on Path Change using ng-Route</
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
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.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('/')"
><a
href
=
"#/"
>
Home</
a
></
li
>
- <li
ng-class
=
"active('/about')"
><a
href
=
"#/about"
>
About</
a
></
li
>
- <li
ng-class
=
"active('/blog')"
><a
href
=
"#/blog"
>
Blog</
a
></
li
>
- </
ul
>
- </
div
>
- </
div
>
- </
nav>
- <div
class
=
"container"
>
- <div
ng-view></
div
>
- </
div
>
- <script
src
=
"app.js"
></
script
>
- </
body
>
- </
html
>
In here, we used Bootstrap navbar to create our menu and we use ng-class to toggle active function that will send our defined parameter. The active function will then compared the sent parameter to the current path and will return active if matched.
app.js
This contains our angular js script. .config is where we setup the each of our path and .controller is where active function is found.
- var
app =
angular.module
(
'app'
,
[
'ngRoute'
]
)
;
- app.config
(
function
(
$routeProvider)
{
- $routeProvider
- .when
(
'/'
,
{
- templateUrl:
'home.html'
- }
)
- .when
(
'/about'
,
{
- templateUrl:
'about.html'
- }
)
- .when
(
'/blog'
,
{
- templateUrl:
'blog.html'
- }
)
- .otherwise
(
{
- redirectTo:
'/'
- }
)
;
- }
)
;
- app.controller
(
'mainCtrl'
,
function
(
$scope,
$location)
{
- $scope.active
=
function
(
path)
{
- return
(
$location.path
(
)
===
path)
?
'active'
:
''
;
- }
- }
)
;
Creating our Path Templates
The ff. are the template for our route.
home.html
about.html
blog.html
That ends this tutorial. Happy Coding :)