An interactive introduction to
AngularJS is a structural framework for dynamic web apps, using HTML for templating and allows extending HTML's syntax to render custom built components.
Angular is what HTML would have been, had it been designed for applications
MVC - Model View Controller
Athough, Angular does behave a lot like MVVM - Model View ViewModel
Which makes it very testable
Unit Tests
E2E Tests
AngularJS uses HTML for templating
You can choose to use other engines like jade
Acts as an interlayer between model and view, should be as thin as possible.
avoid business logic in controller
should not care about presentation or DOM manipulation.
Through scope
Directives are special markers on a DOM element (such as an attribute, element name, comment or CSS class) that signals AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children
This deserves it's own presentation
AngularJS modules are collections of configuration and run blocks which get applied to the application during the bootstrap process
are containers for the different parts of your app
define routes, the view and controller that render when accessing that route
using angular binding tags, display a javascript expression on the page
Code Samples
<!-- angular model binding -->
<div>
{{ "Hello"+"Angular!" }}
</div>
<!-- accepts any expression -->
<div>
{{ 2 + 3 }}
</div>
Use the ng-model directive to declare a model
Code Samples
<!-- set firstName model in html template -->
<input type="text" ng-model="firstName">
<!-- bind model value to template -->
<div>
{{ firstName }}
</div>
// set model in a controller
$scope.firstName = "Archer";
Using data binding tags, display the current value of myModel
Import a new external javascript file.
Create a new angular module, and set the body tag as the module container.
Code Samples
// creation uses a 2nd array argument to import dependencies
angular.module('myApp', []);
// retrieval has only one argument
var myApp = angular.module('myApp');
myApp
.config(function(){
// config
})
.run(function(){
// initialize
});
declare a controller named myController
on the myApp module
Code Samples
var myApp = angular.module('myApp');
myApp.controller('MyController', function(){
});
myApp.controller('MyController', ['$scope', function($scope){
});
set the initial value of myModel in the controller
move the controller into a separate file
Create an injectable Value
Code Samples
myApp.value('mainCharacter', 'Archer');
Create an injectable Constant
code samples
myApp.constant('APP_VERSION','v.0.1.0');
Create an injectable Factory
like a Value, except can use other services
Code Samples
myApp.factory('HelloWorldFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
},
sayGoodbye: function() {
return "Goodbye";
}
};
});
// inject in controller
function MyController($scope, HelloWorldFactory) {
$scope.greeting = HelloWorldFactory.sayHello();
}
Create an injectable Service
like a Factory, except returns a service by invoking a constructor
Code Samples
myApp.service('HelloWorldService', function() {
this.sayHello = function() {
return "Hello, World!"
};
});
function HelloWorld2() {
this.sayHello = function() {
return "Hello, World!"
};
}
myApp.service('HelloWorld2Service', HelloWorld2);
function HelloWorld3withDeps( $http ) {
this.sayHello = function() {
return "Hello, World!"
};
}
myApp.service('HelloWorld3withDeps', ['$http', HelloWorld3withDeps]);
Use the ng-repeat directive to render each book
Code Samples
<div ng-repeat="n in [42, 43, 44, 45]">
{{n}}
</div>
<div ng-repeat="book in books">
<h4>{{ book.title }}</h4>
<p class="book_author">{{ book.author }}</p>
</div>
<div ng-repeat="movie in MovieService.getMovies()">
<p>{{ movie.title }}</p>
</div>
Use the BookService to add a new book
Code Samples
<button type="button" ng-click="alert('hello world);">Hello World</button>
<button type="button" ng-click="BookService.addBook(new_book);">Add Book</button>
Create an injectable and configurable Provider
It is the most verbose with the most abilities, but for most services it's overkill.
test!
sanity check!
Code Samples
myApp.provider('HelloWorld', function() {
this.name = 'Stranger';
this.setName = function(name) {
this.name = name;
};
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!";
}
}
};
});
// configurable, note 'HelloWorldProvider' in config
myApp.config(function(HelloWorldProvider){
HelloWorldProvider.setName('Angular World');
});
// inject in controller
function myController($scope, HelloWorld) {
$scope.greeting = HelloWorld.sayHello();
}
Filter only movies released in 1983
Create a custom Filter for movies released after 1983
Create a Filter that's matches user input to book titles
Code Samples
<ul class="books" ng-repeat="book in books | filter:year=1983">
<ul class="books" ng-repeat="book in books | filter:searchBookTitle">
Order book's by title, and reverse order movies by release date
Code Samples
<ul class="books" ng-repeat="book in books | orderBy:'title'">
<ul class="books" ng-repeat="book in books | filter:searchBookTitle | orderBy:'-year'">
Inject and Configure $routeProvider
and split the views and controllers into separate files
Inject $locationProvider to enable html5mode to use prettier urls
Use $routeProvider.otherwise to set a default 404 route
fails!
Code Samples
$routeProvider
.when('/', {
templateUrl : 'views/default.html'
})
when('/books', {
templateUrl : 'views/books.html',
controller : 'BooksController'
});
Animate the changing of views using ngAnimate
animations.css
.ng-enter {
transition-delay: 0.5s;
transition:0.5s linear all;
opacity:0;
}
.ng-enter.ng-enter-active {
transition-delay: 0.5s;
opacity:1;
}
.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.ng-leave.ng-leave-active {
opacity:0;
margin-left:20px;
}
.fade.ng-leave {
animation: my_fade_animation 0.5s linear;
-webkit-animation: my_fade_animation 0.5s linear;
}
@keyframes my_fade_animation {
from { opacity:1; }
to { opacity:0; margin-left:20px; }
}
@-webkit-keyframes my_fade_animation {
from { opacity:1; }
to { opacity:0; margin-left:20px;}
}
Angular guide https://docs.angularjs.org/guide/scope
Providers https://docs.angularjs.org/guide/providers
ngRepeat https://docs.angularjs.org/api/ng/directive/ngRepeat
ngAnimate https://docs.angularjs.org/api/ngAnimate
$routeProvider https://docs.angularjs.org/api/ngRoute/provider/$routeProvider