Hello World
AngularJS 1.x 的網址為 https://angularjs.org/
頁面上HelloWorld代碼
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
使用CDN方式
通過百度CDN http://cdn.code.baidu.com/ 查找Angular的URL替代src的地址
使用npm install方式安裝
新建項目文件夾，在文件夾下執(zhí)行
npm install angular --save將上面的src引入的代碼換成
<script src="node_modules/angular/angular.js"></script>輸入框中輸入文本，會同時在下面文本的
{{yourName}}處顯示
要執(zhí)行，必須在容器前面加上ng-app，表示里面的代碼由Angular來管理
<html ng-app>或<div ng-app ng-init="user.name='world'">ng-model建立了模型變量的雙向綁定，表達式{{變量}}也建立了雙向綁定
{{::user.name}}是單向綁定，后面數據修改，取出的值不同時修改
Angular 解放了傳統(tǒng) JavaScript 中頻繁的 DOM 操作
Angular本地文檔運行：
hs -o -p 8888建立本地服務器
MVC
- Model: ng-model 中定義的可以看作Model
- View: 視圖頁面
- Controller: 控制器的JS代碼
以用戶登錄為例 - 模型
- 我們數據庫中所有用戶的信息
- 接受控制器傳來的用戶名和密碼進行校驗的業(yè)務邏輯并返回true/false
- 控制器
- 接受用戶在界面上填寫的用戶名和密碼
- 將用戶名和密碼交給模型
- 視圖
- 給用戶呈現一個表單
- 接受用戶輸入內容，并將其提交給控制器
- 根據控制器返回的數據，響應用戶頁面
模塊（Module）與控制器（Controller）
通過var app= angular.module('myApp',[]);注冊模塊，第一個參數是這個模塊的名字，第二個參數是這個模塊所依賴的模塊。注意必須指定第二個參數，否則變成找到已經定義的模塊。
在html中，<div ng-app="myApp" ng-controller="DemoController">說明這個div交由myApp這個module來管理，controller由自定義DemoController來管理。
app.controller('DemoCtrl');創(chuàng)建一個DemoCtrl控制器，也可以通過如下代碼創(chuàng)建并進行初始化。
app.controller('DemoController', function($scope) {
// 當控制器執(zhí)行時會自動執(zhí)行的函數
$scope.user = {};
$scope.user.name = '張三';
// $scope不僅僅可以往視圖中暴露數據，還可以暴露行為
$scope.show = function() {
console.log($scope.user);
};
});
angular在執(zhí)行控制器函數時，會根據參數的名字（$scope）去自動的注入對象，由于壓縮代碼會改變參數名稱，注冊控制的標準方式就是通過第二個參數傳遞數組的方式（數組的成員最后一個就是原本的控制器函數，前面的成員都是需要注入的對象名稱），如下所示（$scope）注入到function的a中。
module.controller('HelloController', ['$scope','$http', function(a,b) {
console.log(a);
}]);
通常建立對象存儲數據
$scope.user = {
username: '',
password: ''
};
行為數據，$scope暴露數據給全局用，不需要在function中傳入
$scope.login = function() {
// 因為數據的變化時雙向的同步，所以界面上的值變化會同步到$scope.user上
console.log($scope.user);
};
angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite，然后用angular.element('body')操作
監(jiān)視第一個值發(fā)生變化，回調第二個傳入的函數。函數中傳入兩個參數，一般用(now, old)來表示當前和之前的值
$scope.$watch('user.username', function(now, old) {
// 當user.username發(fā)生變化時觸發(fā)這個函數
// console.log('now is ' + now);
// console.log('old is ' + old);
if (now) {
if (now.length < 7) {
$scope.message = '輸入格式不合法';
} else {
$scope.message = '';
}
} else {
$scope.message = '請輸入用戶名';
}
})
$scope 視圖和控制器之間的橋梁
AngularJS Batarang插件，安裝后，勾選Enable啟用，然后點擊Scopes，可以選擇查看Scope里面的數據
表達式
<body ng-app ng-cloak>ng-cloak隱藏表達式原型得到結果后顯示，但直接用效果不理想，相當于在style中添加了[ng-cloak] { display: none;}。由于頁面加載速度很快，style中還沒加載完，表達式就直接顯示在頁面上了。因此我們要自己手工添加。也可以用class實現<body ng-app class="ng-cloak">，在style中添加?；蛘邔⒁隺ngular的代碼放在head中也可以
<style>
/* ng-cloak指令就是在NG執(zhí)行完畢過后自動移除 */
[ng-cloak],
.ng-cloak {
display: none;
}
</style>
常用表達式
{{ 100 + 100 }} 數字
{{ 'hello' + 'angular' }} 字符串
{{ zhangsan.name }} 對象，必須在$scope中定義
{{ students[10] }} 數組
{{ true ? 'true':'false' }} 三元表達式
