angularJS入门笔记

最新推荐文章于 2024-11-05 23:53:45 发布

weixin_30548917

最新推荐文章于 2024-11-05 23:53:45 发布

阅读量77

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/soul-wonder/p/8819928.html

版权

1.debug调试工具：batarang
2.ng指令
　　1、ng-app=" " 定义angularJS的使用范围；----main方法，入口 ng-app="myModule"

　　2、ng-init="变量=值;变量='值'" 初始化变量的值，有多个变量时，中间用分号隔开；

　　3、ng-model="变量" 定义变量名；
　　　　绑定 HTML 元素到应用程序数据。
　　　　为应用程序数据提供类型验证（number、email、required）。
　　　　为应用程序数据提供状态（invalid、dirty、touched、error）。
　　　　为 HTML 元素提供 CSS 类。
　　　　绑定 HTML 元素到 HTML 表单。

　　4、ng-bind="变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。
　　5、ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。
　　6、directive创建自定义的指令
　　　　.directive 函数来添加自定义的指令。
　　　　要调用自定义指令，HTML 元素上需要添加自定义指令名。
　　　　　　restrict 值可以是以下几种:
　　　　　　　　E 作为元素名使用
　　　　　　　　A 作为属性使用
　　　　　　　　C 作为类名使用
　　　　　　　　M 作为注释使用
　　　　　　restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
　　　　　　使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:★★★

1 <script>
2 var app = angular.module("myApp", []);
3 app.directive("runoobDirective", function() {
4 return {
5 restrict: 'AE',
6 template : "<h1>自定义指令!</h1>"
7 };
8 });
9 </script>

<runoob-directive></runoob-directive>

3.ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
　　ng-valid: 验证通过
　　ng-invalid: 验证失败
　　ng-valid-[key]: 由$setValidity添加的所有验证通过的值
　　ng-invalid-[key]: 由$setValidity添加的所有验证失败的值
　　ng-pristine: 控件为初始状态
　　ng-dirty: 控件输入值已变更
　　ng-touched: 控件已失去焦点
　　ng-untouched: 控件未失去焦点
　　ng-pending: 任何为满足$asyncValidators的情况

<input name="myAddress" ng-model="text" required>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>

4.$scope作用域 {{变量}}
　　　　Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
　　　　Scope 是一个对象，有可用的方法和属性。
　　　　Scope 可应用在视图和控制器上。
　　1.当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
　　　　app.controller('myCtrl', function($scope) {
　　　　$scope.carname = "Volvo";
　　　　});
　　2. $rootScope 根作用域
　　　　$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

5.控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

6.过滤器进行数据格式化
　　过滤器可以使用一个管道字符（|）添加到表达式和指令中。
　　　　currency 格式化数字为货币格式。
　　　　filter 从数组项中选择一个子集。
　　　　lowercase 格式化字符串为小写。
　　　　orderBy 根据某个表达式排列数组。
　　　　uppercase 格式化字符串为大写。

<p>姓名为 {{ lastName | lowercase }}</p>
<p>总价 = {{ (quantity * price) | currency }}</p>

<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>

<p>输入过滤:</p>
<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

　　自定义过滤器：

姓名: {{ msg | reverse }}
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.msg = "Runoob";
    });
    app.filter('reverse', function() { //可以注入依赖
        return function(text) {    //text页面输入的值，（被过滤的值）
            return text.split("").reverse().join("");
        }
    });
</script>

7.服务(Service) 　　除了$scope，service在生命周期中也可以来共享数据
　　--service,provider,factory本质都是provider，只是写法不同
　　--service都是单例的
　　--自定义的service写在内置的service后面
　　--内置的service有$,自定义的应该避免使用$，进行区别
　　在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
　　AngularJS 内建了30 多个服务。
　　有个 $location 服务，它可以返回当前页面的 URL 地址。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

　　$http 服务
　　　　$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 服务
　　两秒后显示信息:
　　　　AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});

　　$interval 服务
　　　　AngularJS $interval 服务对应了 JS window.setInterval 函数。
　　　　每一秒显示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

创建自定义服务
　　　　创建名为hexafy 的服务:

app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});

　　　　使用自定义的的服务 hexafy 将一个数字转换为16进制数:

app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

8.$http --XMLHttpRequest --封装了ajax
　　简单的 GET 请求，可以改为 POST

$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
$scope.names = response.data.sites;    //注：1.5一下版本没有data
}, function errorCallback(response) {
// 请求失败执行代码
});

　　POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

9.select / 选择框
　　AngularJS 可以使用数组或对象创建一个下拉列表选项。
　　　　ng-options ： <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
　　　　ng-repeat： <select><option ng-repeat="x in names">{{x}}</option>
　　　　ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
　　　　　　★★★使用 ng-options 的选项是一个:对象， ng-repeat 是一个:字符串。★★★
　　　　使用对象作为数据源, x 为键(key), y 为值(value):
　　　　　　<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
　　　　页面下拉框初始化是空的，设置初始值方法：
　　　　　　$scope.selectedCar = $scope.cars.car02; //设置第2个为初始值；
　　　　另外一种设置初始值的方法：
　　　　　　<select ng-init="selectPerson=persons['caohui']" ng-model="selectPerson"
　　　　　　ng-options="x for (x,y) in persons">

10.表格　　 ng-repeat 指令可以完美的显示表格。
　　显示序号 ($index)

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

使用 $even 和 $odd

<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
<td ng-if="$even">
{{ x.Country }}</td>

11-1.HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令
　　ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
　　ng-show 指令隐藏或显示一个 HTML 元素。
　　ng-hide 指令用于隐藏或显示 HTML 元素。

11-2.ngAnimate /动画
　　AngularJS 提供了动画效果，可以配合 CSS 使用。
　　AngularJS 使用动画需要引入 angular-animate.min.js 库。

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<body ng-app="ngAnimate">

　　ngAnimate 模型可以添加或移除 class 。
　　ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
　　AngularJS 添加/移除 class 的指令

11-3.ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

12.事件
　　ng-click 指令定义了 AngularJS 点击事件。

<button ng-click="count = count + 1">点我！</button>

　　ng-dbl-click
　　ng-mousedown
　　ng-mouseenter
　　ng-mouseleave
　　ng-mousemove
　　ng-keydown
　　ng-keyup
　　ng-keypress
　　ng-change

13.模块--module
　　模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});

14.表单
　　input 元素
　　select 元素
　　button 元素
　　textarea 元素

Input 控件使用 ng-model 指令来实现数据绑定。
　　<input type="text" ng-model="firstname">
　　　　firstname 属性可以在 controller 中使用：
　　　　也可以在应用的其他地方使用:
　　　　　　<h1>You entered: {{firstname}}</h1>
　　Checkbox（复选框）
　　　　checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中：
　　单选框
　　　　单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
　　下拉菜单
　　　　<select ng-model="myVar">
　　　　<option value="">
　　　　<option value="dogs">Dogs
　　HTML 表单

<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>    注：：novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});

　　下拉框初始化无默认值，或者有空白选项，影响美观，可通过以下方法调整：
　　　　1.给定初始化信息（ng-init）
　　　　2.隐藏空白选项（ng-show="false"）

15.输入验证
　　属性　　　　描述
　　$dirty 　　表单有填写记录
　　$valid 　　字段内容合法的
　　$invalid 　　字段内容是非法的
　　$pristine 　　表单没有填写记录

16.API
API 　　　　　　　　　　　　描述
angular.lowercase() 　　　　转换字符串为小写
angular.uppercase() 　　　　转换字符串为大写
angular.isString() 　　　　　判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 　　　　判断给定的对象是否为数字，如果是返回 true。

JSON
API 　　　　　　　　　　　　描述
angular.fromJson() 　　　　反序列化 JSON 字符串　　把一个Json字符串中解析成一个对象，或对象数组
angular.toJson() 　　　　　　序列化 JSON 字符串　　能把对象序列化为json串

比较
API 　　　　　　　　　　　　　　描述
angular.isArray() 　　　　如果引用的是数组返回 true
angular.isDate() 　　　　如果引用的是日期返回 true
angular.isDefined() 　　　如果引用的已定义返回 true
angular.isElement() 　　　如果引用的是 DOM 元素返回 true
angular.isFunction() 　　　　如果引用的是函数返回 true
angular.isNumber() 　　　　如果引用的是数字返回 true
angular.isObject()　　　　如果引用的是对象返回 true
angular.isString()　　　　　　　如果引用的是字符串返回 true
angular.isUndefined() 　　　　　如果引用的未定义返回 true
angular.equals()　　　　　　　如果两个对象相等返回 true

17.依赖注入
　　一句话 --- 没事你不要来找我，有事我会去找你。
　　AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
　　　　value 　　　　　　 Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
　　　　factory 　　　　　　 factory 是一个函数用于返回值。在 service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值。
　　　　Service
　　　　provider　　　　　　通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
　　　　constant 　　　　　　constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

18.路由ng-rotue
　　$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所依赖的其他模块
　　});

angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);

18-2.ui-route:
页面ui-view指令

routeApp.config(function($stateProvider,$urlRouteProvider)) {
            $stateProvider
                .state('tab', {
                    url: '/tab',
                    abstract: true,
                    templateUrl: 'templates/tabs.html',
                    controller: 'TabsCtrl'
                })

            $urlRouterProvider.otherwise('/tab/home');
        }

19页面HTML 元素：

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。

当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 "angular-santize.js" 模块，使用 ngSanitize 函数来检测代码的安全性。 in your application you can do so by running the HTML code through the ngSanitize function.

<element ng-bind-html="expression"></element>

所有的 HTML 元素都支持该指令。

<p ng-bind-html="myText"></p>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>