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方式安装
新建项目文件夹，在文件夹下执行
npm install angular --save将上面的src引入的代码换成
<script src="node_modules/angular/angular.js"></script>输入框中输入文本，会同时在下面文本的
{{yourName}}处显示
要执行，必须在容器前面加上ng-app，表示里面的代码由Angular来管理
<html ng-app>或<div ng-app ng-init="user.name='world'">ng-model建立了模型变量的双向绑定，表达式{{变量}}也建立了双向绑定
{{::user.name}}是单向绑定，后面数据修改，取出的值不同时修改
Angular 解放了传统 JavaScript 中频繁的 DOM 操作
Angular本地文档运行：
hs -o -p 8888建立本地服务器
MVC
- Model: ng-model 中定义的可以看作Model
- View: 视图页面
- Controller: 控制器的JS代码
以用户登录为例 - 模型
- 我们数据库中所有用户的信息
- 接受控制器传来的用户名和密码进行校验的业务逻辑并返回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');创建一个DemoCtrl控制器，也可以通过如下代码创建并进行初始化。
app.controller('DemoController', function($scope) {
// 当控制器执行时会自动执行的函数
$scope.user = {};
$scope.user.name = '张三';
// $scope不仅仅可以往视图中暴露数据，还可以暴露行为
$scope.show = function() {
console.log($scope.user);
};
});
angular在执行控制器函数时，会根据参数的名字（$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')操作
监视第一个值发生变化，回调第二个传入的函数。函数中传入两个参数，一般用(now, old)来表示当前和之前的值
$scope.$watch('user.username', function(now, old) {
// 当user.username发生变化时触发这个函数
// 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中添加。或者将引入angular的代码放在head中也可以
<style>
/* ng-cloak指令就是在NG执行完毕过后自动移除 */
[ng-cloak],
.ng-cloak {
display: none;
}
</style>
常用表达式
{{ 100 + 100 }} 数字
{{ 'hello' + 'angular' }} 字符串
{{ zhangsan.name }} 对象，必须在$scope中定义
{{ students[10] }} 数组
{{ true ? 'true':'false' }} 三元表达式
网友评论