- AngularJS 表达式写在双大括号内：{{ expression }}
- ng-app 指令初始化一个 AngularJS 应用程序。
- ng-init 指令初始化应用程序数据。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
- 双向绑定
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Ada";
});
</script>
- Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
- 根作用域$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
- ng-controller 指令定义了应用程序控制器。AngularJS 应用程序被控制器控制。
- View(视图), 即 HTML。Model(模型), 当前视图中可用的数据。Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
- 自定义过滤器
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
-
http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
-
timeout 服务对应了 JS window.setTimeout 函数。
-
interval 服务对应了 JS window.setInterval 函数。
- 自定义服务
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
- AngularJS DOM操作
- ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
- ng-show 指令隐藏或显示一个 HTML 元素。
- ng-hide 指令用于隐藏或显示 HTML 元素。
- AngularJS 事件
- ng-click 指令定义了 AngularJS 点击事件。
- Angularjs依赖注入
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 依赖注入</title>
</head>
<body>
<h2>AngularJS 简单应用</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>输入一个数字: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>结果: {{result}}</p>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script>
//创建模块
var mainApp = angular.module("mainApp", []);
//AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
//Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
mainApp.value("defaultInput", 5);
//constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
//mainApp.constant("configParam", "constant value");
//自定义服务
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
//创建控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<!--路由视图-->
<div ng-view></div>
<!--引用angularjs和angular-route-->
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
//创建模块
angular.module('routingDemoApp',['ngRoute'])
//配置路由
.config(['$routeProvider',
//回掉函数
function($routeProvider){
$routeProvider//路由对象
//地址,对象{template:简单的html元素}
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
//重定向
.otherwise({redirectTo:'/'});
}]);
</script>
$routeProvider.when(url,{
template:string, //在ng-view中插入简单的html内容
templateUrl:string, //在ng-view中插入html模版文件
controller:string,function / array, //在当前模版上执行的controller函数
controllerAs:string, //为controller指定别名
redirectTo:string,function, //重定向的地址
resolve:object<key,function> //指定当前controller所依赖的其他模块
});
网友评论