First Time AngularJS

Have you heard about AngularJS?

AngularJS is a client-side javascript framework. You can use it to implement data binding in html page!! Also you can build MVC clinet, single page app and you can teach HTML new syntax by defining your own directives.

Objective:

  • What can we do with AngularJS?

Environment:

  • Web browser! (Firefox or Chrome)

Library:

( 0 ) Have an HTML file

  • Create a new html file with the following content.
  • Nothing special so far just simple HTML tags with <script> tags pointing to our library angular.min.js.
  • Notice the ng-app in the <html> tag. This is a must!
<!doctype html>
<html ng-app>
	<head>
		<script src="angular.min.js"></script>
	</head>
	<body>
		<h2>Hello AngularJS</h2>
	</body>
</html>

( 1 ) Data Binding

  • The first cool thing about AngularJS is data binding.
  • Simply you can create a data model “object holding the data” and bind it anywhere using {{…}}
  • It is two-way!
<!doctype html>
<html ng-app>
	<head>
		<script src="angular.min.js"></script>
	</head>
	<body>
		<h2>Hello AngularJS</h2>
		<input type="text" ng-model="data.source" >
		<input type="text" ng-model="data.source" >
		<h1>{{data.source}}</h1>

	</body>
</html>

 

angularjs-binding

 

Another good example is dealing with DOM. Here we will change style of an html tag by binding its style property to a model.

<!doctype html>
<html >
	<head>
		<script src="angular.min.js"></script>
	<style type="text/css">
	.style1{
		border:1px #333 solid;
		width:300px;
	}
	.style2{
		border:1px #999999;
		background-color:#0099FF;
		color:#fff;
		width:300px;
	}
	</style>
	</head>

	<body>
	<div ng-app>
		<input type="text" ng-model="data.source" >
		<h2 class="{{data.source}}">Hello AngularJS</h2>
	</div>	

	</body>
</html>

 

( 2 ) Directives

  • AngularJS provides set of built in directives
  • These directive are adding new syntax “non-standard HTML” to HTML.
  • You can define your own directives.
  • ng-app which we used above is an example of a directive that should be used to run AngularJS.
  • ng-model is another directive that will create for us data holder in the memory.
  • Below we will have two more interesting directives ng-init which initializes for us an array, the second one is ng-repeat which loops over this list
<!doctype html>
<html ng-app>
	<head>
		<script src="angular.min.js"></script>
	</head>
	<body>
	<div ng-init="names=['A','B','C','D']">
		<ul>
			<li ng-repeat="name in names">{{name}}</li>
		</ul>
	</div>		
	</body>
</html>

( 3 ) Filters

  • Filter are formatting the data display
  • AngularJS has a set of built-in filters

  • In the previous example if we would like to lowercase the output we will use lowercase filter {{name | lowercase}}. Notice the pipe “|”.
<!doctype html>
<html ng-app>
	<head>
		<script src="angular.min.js"></script>
	</head>
	<body>
	<div ng-init="names=['A','B','C','D']">
		<ul>
			<li ng-repeat="name in names">{{name | lowercase}}</li>
		</ul>
	</div>		
	</body>
</html>
  • Another nice example is filtering the outputs
<!doctype html>
<html ng-app>
	<head>
		<script src="angular.min.js"></script>
	</head>
	<body>
	<div ng-init="fruits=['Apple','Banana','Watermelon','Peach']">
	<input type="text" ng-model="fruitName" />
		<ul>
			<li ng-repeat="fruit in fruits | filter:fruitName">{{fruit | uppercase}}</li>
		</ul>
	</div>		
	</body>
</html>

( 4 ) View, Controller & Scope

  • Controller: take care of the logic and data
  • View: is just the view part
  • $scope: is an object that connect view to a controller.

I will modify the previous example to build a controller:

  • Build the controller “javascript function” FruitController and pass $scope as an argument.
  • Remove the ng-init directive and move the array of fruits to the controller.
  • Here we will add the controller in the same page which is not recommended approach. Always keep controller in a separate file.
<script>
function FruitController($scope){
$scope.fruits=['Apple','Banana','Watermelon','Peach'];
}
</script>
  • Add ng-controller directive
	<div ng-controller="FruitController">
<!doctype html>
<html ng-app>
	<head>
		<script src="angular.min.js"></script>
	</head>
	<body>
	<div ng-controller="FruitController">
	<input type="text" ng-model="fruitName" />
		<ul>
			<li ng-repeat="fruit in fruits | filter:fruitName">{{fruit | uppercase}}</li>
		</ul>
	</div>

		<script>
			function FruitController($scope){
				$scope.fruits=['Apple','Banana','Watermelon','Peach'];
			}
		</script>
	</body>
</html>

( 5 ) Modules

  • AngularJS is a modular framework.
  • Instead of coding our app in the way we did above we can take advantage of the module capability AngularJS offers. So we will end-up with modules that can be reused in other places.
  • To create a module we type the below code, where the first parameter is the module name and the second array parameter  [] is to specify the modules this module depending on.
var firstModule = angular.module("firstModule", []);
  • Now we will add controller to this module, notice what has been changed from the way we defined the controller above.
var firstModule = angular.module("firstModule",[]);

firstModule.controller("FruitController", function ($scope){
                $scope.fruits=['Apple','Banana','Watermelon','Peach'];
 });
  • Still our app does not know about our module, to use our module we need to define to our ng-app
<html ng-app="firstModule">

( 6 ) Routs

  • Routs allow us to change views when a url pattern is specified.
  • The routs can be coded as following:
firstModule.config(function($routeProvider) {
                $routeProvider
                    .when('/', 
                    {
                        templateUrl: 'view1.html', 
                        controller: "FruitController"
                    })
                    .when('/view2', 
                    {
                        templateUrl: 'view2.html', 
                        controller: ""
                    })
                    .otherwise({redirectTo: '/'});
            });

view1.html: we will move the input text and the list of fruits out of the main page index.html to view1.html

<div>
    <input type="text" ng-model="fruitName" />
        <ul>
            <li ng-repeat="fruit in fruits | filter:fruitName">{{fruit | uppercase}}</li>
        </ul>
</div>

view2.html: will just a simple div

    <div>
        View2
    </div>
  • Also, we need to add ng-view directive to the tag where partial views we will be injected to.
<div ng-view></div>
  • Complete code for index.html
<!doctype html>
<html ng-app="firstModule">
	<head>
		<script src="angular.min.js"></script>
	</head>
	<body>

	<div ng-view></div>
		<script>

			var firstModule = angular.module("firstModule",[]);

			firstModule.controller("FruitController", function ($scope){
				$scope.fruits=['Apple','Banana','Watermelon','Peach'];
			});
			firstModule.config(function($routeProvider) {
				$routeProvider
					.when('/', 
					{
						templateUrl: 'view1.html', 
						controller: "FruitController"
					})
					.when('/view2', 
					{
						templateUrl: 'view2.html', 
						controller: ""
					})
					.otherwise({redirectTo: '/'});
			});
		</script>
	</body>
</html>

Code @ github