17. Angularjs
home
Contents
Overview
<![CDATA[
// code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
]]>
- training material: https://www.w3schools.com/angular/
- section AngularJS Tutorial, Angular Home
- The code analysis is as below.
- the libraries
- new html attribute ng-app for scope.
- new html attribute ng-model for binding data.
- {{name }} is Angular expression for binding data.
comments on the above example
- no declartive code, like class in jsavascript.
- There is no button click to provide more plesant user experiences.
- In addition to data binding, there are more other helps.
Routing, prepared in 12/02/2017
<![CDATA[
// ------------ index.html ------------------
<a href="main.html">go to main</a>
// ------------ house1.html ------------------
<h4>house 1</h4>
<h5>address: 123 Liberty Rd, Quincy, MA</h5>
<p>4 bedrooms</p>
<p>The price is ${{msg}}</p>
// ------------ house2.html ------------------
<h4>house 2</h4>
<h5>address: 555 Freedom Ln, Quincy, MA</h5>
<p>3 bedrooms</p>
<p>The price is ${{msg}}</p>
// ------------ main.html --------------------
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<p><a href="#!house1">House 1</a>
<a href="#!house2">House 2</a>
</p>
<div ng-view></div>
<pre>
Quincy Property Company
address: 987 Trusted Rd, Quincy, MA
phone: 666-777-8888
</pre>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl : "main.html",
})
.when("/house1", {
templateUrl : "house1.html",
controller : "house1Ctrl"
})
.when("/house2", {
templateUrl : "house2.html",
controller : "house2Ctrl"
});
});
app.controller("house1Ctrl", function ($scope) {
$scope.msg = "36,500"
});
app.controller("house2Ctrl", function ($scope) {
$scope.msg = "30,100"
});
</script>
</body>
</html>
]]>
explanation
- I learned this topic from w3c angularjs tutorial.
- Angularjs uses strange characters for urls.
It is not a right way to ask a user to use the url with those strange characters, like !,# ..
In order to avoid this, I use index.html.
- house1.html and house2.html are code snippets
{{msg}} is a expression, passing from angular controller.
Augularjs routing is for parital page updates from different files without rendering the whole page.
It is called SPA.
It is implemented with MVC design pattern.
Data msg is prepared in angular controller, the C.
Data msg is used in the html tag with ng-view, the V. .
The M is the model(data). It is taken care of in the C.
Data msg is dynamic information. Prices changes with time.
Angularjs framework will take care of the rest.
- main.html is the main code.
- code 1: required libraries
- code 2: Real Estate Company's data.
In the urls for a tags, you'll see some extra prefix characters, like #, i.
Those characters are not shown in the configuration code.
- code 3: Configuration code:
Mapping urls and html files
- code 4: the codes for their controller
It prepares the dynamic data, like msg