aweatherbornestorm
Combo Breaker
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Getting Started
I've used CDN for Bootstrap, Angular JS, and Angular Animate so you need internet connection for them to work.
index.html
This is the main view of our app.
In here we have used Bootstrap navbar to create our menus and we assign id for our ui-view where we add our animation CSS.
Add Style
Add the ff CSS to trigger our slide animation. We name this as style.css
app.js
This contains our angular js script.
Notice that we have included 'ng-Animate' as the dependency for Angular Animate.
Add Path Templates
Add the ff templates for our path.
home.html
about.html
blog.html
That ends this tutorial. Happy Coding :)
I've used CDN for Bootstrap, Angular JS, and Angular Animate 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 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
>
- <script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"
></
script
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
>
- </
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
=
"#"
>
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
id
=
"views"
ui-view></
div
>
- </
div
>
- <script
src
=
"app.js"
></
script
>
- </
body
>
- </
html
>
In here we have used Bootstrap navbar to create our menus and we assign id for our ui-view where we add our animation CSS.
Add Style
Add the ff CSS to trigger our slide animation. We name this as style.css
- #views
.ng-enter,
- #views
.ng-leave
{
- position
:
absolute
;
left
:
30px
;
right
:
30px
;
- transition
:
0.5s
all ease;
-moz-transition:
0.5s
all ease;
-webkit-transition:
0.5s
all ease;
- }
- #views
.ng-enter
{
- -webkit-animation:
slideInRight 0.5s
both
ease;
- -moz-animation:
slideInRight 0.5s
both
ease;
- animation
:
slideInRight 0.5s
both
ease;
- }
- #views
.ng-leave
{
- -webkit-animation:
slideOutLeft 0.5s
both
ease;
- -moz-animation:
slideOutLeft 0.5s
both
ease;
- animation
:
slideOutLeft 0.5s
both
ease;
- }
- @keyframes
slideOutLeft {
- to {
transform
:
translateX(
-200%
)
;
}
- }
- @-moz-keyframes
slideOutLeft {
- to {
-moz-transform:
translateX(
-200%
)
;
}
- }
- @-webkit-keyframes
slideOutLeft {
- to {
-webkit-transform:
translateX(
-200%
)
;
}
- }
- @keyframes
slideInRight {
- from {
transform
:
translateX(
200%
)
;
}
- to {
transform
:
translateX(
0
)
;
}
- }
- @-moz-keyframes
slideInRight {
- from {
-moz-transform:
translateX(
200%
)
;
}
- to {
-moz-transform:
translateX(
0
)
;
}
- }
- @-webkit-keyframes
slideInRight {
- from {
-webkit-transform:
translateX(
200%
)
;
}
- to {
-webkit-transform:
translateX(
0
)
;
}
- }
app.js
This contains our angular js script.
- var
app =
angular.module
(
'app'
,
[
'ui.router'
,
'ngAnimate'
]
)
;
- 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'
:
''
;
- }
- }
)
;
Notice that we have included 'ng-Animate' as the dependency for Angular Animate.
Add Path Templates
Add the ff templates for our path.
home.html
about.html
blog.html
That ends this tutorial. Happy Coding :)