Angular JS
Posted 怀瑾握瑜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular JS相关的知识，希望对你有一定的参考价值。
Angular JS就是俗称的Angular 1
Angualr 开发的核心就是视图和业务操作数据分离开来。
（一）Angular JS 指令简述
Angular中把具有特殊作用的标签属性称为指令，这些指令全部以ng打头
ng-app指令可以指定当前视图由哪个模块管理，即angular指令的覆盖范围。
<body ng-app="app">
<div>{{name}}</div>
<body>
<script>
var app = angular.module("app",[ ]);
</script>
(二)控制器——创建与关联
控制器是我们编写业务逻辑的入口，在这里我们操作数据改变视图
<body ng-app="app">
//关联控制器
<div ng-controller="appCtrl" >{{val*val}}</div>
<body>
<script>
var app = angular.module("app", [ ]);
//app模块添加一个控制器，创建val变量
app.controller("appCtrl",function(){
var val = 10;
});
</script>
(三)$scope——灵活的数据
所以Angular提供了一个$scope对象，给这个对象添加的属性都可以在视图中访问，Angular能获得这些变量并且在视图中使用。
<body ng-app="app">
//关联哪个控制器就可以使用哪个控制器的$scope数据
<div ng-controller="appCtrl">val*val</div>
</body>
<script>
var app = angular.module("app", [ ]);
//App模块添加了一个控制器，控制器的主要作用是初始化和操作$scope
app.controller("appACrtl", ["$scope",function($scope){
$scope.val = 10;
}])
</script>
一个模块可以创建任意多个控制器
每个控制器可以关联视图中的一部分
<body ng-app="app">
<div ng-controller="appHeaderCtrl">{{ val }}</div>
<div ng-controller="appMainCtrl">{{ val }}</div>
<div ng-controller="appFooterCtrl">{{ val }}</div>
</body>
<script>
var App = angular.module(‘app‘, []);
app.controller(‘appHeaderCtrl‘, [‘$scope‘, function($scope) {
$scope.val = ‘头‘;
}]);
app.controller(‘appMainCtrl‘, [‘$scope‘, function($scope) {
$scope.val = ‘身体‘;
}]);
app.controller(‘appFooterCtrl‘, [‘$scope‘, function($scope) {
$scope.val = ‘脚‘;
}]);
</script>
以上是关于Angular JS的主要内容，如果未能解决你的问题，请参考以下文章
typescript Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming/angular-2/
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming