1.angular 中, 对于想要操作的对象一定加上 ng-app, 和 ng-controller 两条指令, 前者是 指令定义一个 AngularJS 应用程序. 说明该对象是 Angular 程序的所有者. 后者是控制器(Controller) 用于控制 AngularJS 应用. 所有的属性都是以 ng - 开头的, 为了可以支持 html5, 可以写成 data-ng-.
AngularJS 模块定义应用:
AngularJS 模块
var app = angular.module('myApp', []);
AngularJS 控制器控制应用:
AngularJS 控制器
- app.controller('myCtrl', function($scope) {
- $scope.firstName= "John";
- $scope.lastName= "Doe";
- });
2.** 基本的指令
ng-app 指令初始化一个 AngularJS 应用程序.
ng-init 指令初始化应用程序数据.
ng-model 指令把元素值 (比如输入域的值) 绑定到应用程序.
ng-repeat 指令会重复一个 HTML 元素:
可以使用 .directive** 函数来添加自定义的指令: 使用驼峰法来命名一个指令, 例如 myDirective, 但在使用它时需要以 - 分割, my-directive.
2.1 可以通过一下方式调用指令实现你想要的效果:
元素名 : <runoob-directive></runoob-directive>
属性 : <div runoob-directive></div>
类名 : <div class="runoob-directive"></div>
注释 : <!-- 指令: runoob-directive -->
2.2 这些方式可以通过 restrict 来限制使用. restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令.
3.** 作用域.** 首先要知道 angularJS 应用的组成.
AngularJS 应用组成如下: View(视图), 即 HTML. Model(模型), 当前视图中可用的数据. Controller(控制器), 即 JavaScript 函数, 可以添加或修改属性.
scope 是模型, 是营业 ongoing 在视图和控制器之间的纽带. 同时 scope 是一个 JavaScript 对象, 带有属性和方法, 这些属性和方法可以在视图和控制器中使用; 如果修改了视图 (HTML), 模型(model) 和控制器 (JavaScript) 也会相应更新.
3.1 根作用域. 可以全局使用的作用域.
所有的应用都有一个 $rootScope, 它可以作用在 ng-app 指令包含的所有 HTML 元素中.
$rootScope 可作用于整个应用中. 是各个 controller 中 scope 的桥梁. 用 rootscope 定义的值, 可以在各个 controller 中使用.
4.**AngularJS 服务 **
AngularJS 会一直监控应用, 处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好,$http 是 Angular 应用中经常用到的服务,$http 服务向服务器发送请求, 应用响应服务器传送过来的数据. 除此之外还有 $timeout 服务, 和 JS 的 window.setTimeou 函数作用一样; $location 服务, 它可以返回当前页面的 URL 地址.
4.1 可以自己创建自定义服务
自定义服务及使用
- <div ng-app="myApp" ng-controller="myCtrl">
- <p>255 的 16 进制是:</p>
- <h1>{{hex}}</h1>
- </div>
- <script>
- // 自定义服务, 用于转换 16 进制数
- 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>
4.2 在过滤器中使用自定义服务. 要在定义过滤器的时候独立添加. 过滤器中使用自定义服务
- <div ng-app="myApp">
- 在过滤器中使用服务:
- <h1>{{255 | myFormat}}</h1>
- </div>
- <script>
- var app = angular.module('myApp', []);
- app.service('hexafy', function() {
- this.myFunc = function (x) {
- return x.toString(16);
- }
- });
- app.filter('myFormat',['hexafy', function(hexafy) {
- return function(x) {
- return hexafy.myFunc(x);
- };
- }]);
- </script>
5.** 跨域 HTTP 请求 *
5.1 PHP 代码运行使用的网站进行跨域访问. header("Access-Control-Allow-Origin:");
来源: http://www.qdfuns.com/article/29309/a458535d425bf48f7b4e833e690b7bce.html