Angular学习笔记
Angular学习笔记
1.初识angular
-
安装
npm install angular -
在页面的HTML部分添加angular标签
<html lang="en" ng-app="App"></html>//表示html标签内可以作为angular的view部分 -
在JavaScript标签中定义angular模块
const app = angular.module('app',[]) -
定义控制器（controller）最为链接model和view的桥梁
app.controller('StudentController',['$scope',function($scope){ $scope.starts = [ {name:"周杰伦",sex:'男'}, {name:"刘德华",sex:'男'} ] }]) -
将controller与view相关联，通过给标签添加ng-controller属性
<table ng-controller="StudentController"> <tr> <td>姓名</td> <td>性别</td> </tr> <tr ng-repeat="start in starts"> <td>{{student.name}}</td> <td>{{student.sex}}</td> </tr> </table>
2.angular指令
-
内置指令
ng-app 在带有该指令的标签的内部写angular语法才有效 ng-controller 控制器 ng-show 控制元素显示，true显示，false不显示 ng-hide 控制元素隐藏，true隐藏，false不隐藏 ng-if 控制元素是否存在，true存在，false不存在 ng-src 增强图片路径 ng-href 增强地址 ng-class 控制类名 <li ng-class="{red: true, blue: true}">ng-class指令</li> ng-include 引入模板 ng-disabled 表单禁用 ng-readonly 表单只读 ng-checked 单/复选框表单选中 ng-selected 下拉框表单选中 ng-bind 绑定数据与{{}}效果相同 <li ng-bind="name"></li> <li>{{name}}</li> -
自定义指定，通过angular的全局对象directive方法实现
<div tag></div> <tag></tag> <div class="tag"></div> var app = angular.module('app',[]) app.directive('tag',function(){ return { //自定义指令类型 E(element)、A(attribute)、C(class)、M(mark replace必须为true) restrict: 'EA', //是否替换原有标签 replace: true, template: 'hello AngularJs
' //templateUrl:'./list.html' } })
3.数据绑定
-
单项绑定
-
ng-bind
-
{{}}，当出现闪烁现象时，在标签属性上添加ng-clock指定、
<li ng-cloak>{{name}}{{age}}</li> -
绑定多个属性
<li ng-bind-template="{{name}}{{age}}"></li>
-
-
双向数据绑定
-
ng-model属性添加到表单中实现view向controller的传递
<input type="text" ng-model="msg"> <h4>{{msg}}</h4> -
ng-init初始化模型model数据
<div ng-controller="DemoController" ng-init="name='itcast';age=10"> <h1>{{name}}</h1> <h2>{{age}}</h2> </div>
-
4.事件处理
-
ng-click、ng-dblclick、ng-blur等方法
-
例子
<button ng-dblclick="double()">双击</button> var App = angular.module('App', []) App.controller('DemoController', ['$scope', function ($scope) { $scope.double = function () { alert('我被双击了'); } }])
5.循环中的逻辑处理
-
ng-repeat、ng-switch、ng-switch-when、on
-
例子
<li ng-repeat="(key, star) in stars">{{star.name}}{{star.age}}</li> <li ng-repeat="item in items" ng-switch="item"> <span ng-switch-when="css">{{item}}</span> </li>
6.过滤器
-
在{{}}中使用|来调用过滤器，使用：传递参数
-
内置过滤器
1、currency将数值格式化为货币格式 <li>{{price|currency:'￥'}}</li> 2、date日期格式化，年（y）、月（M）、日（d）、时（H/h）、分（m）、秒（s）、毫秒（.sss） <li>{{now|date:'yyyy/MM/dd hh:mm:ss'}}</li> 3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数 <li>{{items|filter:'s'}}</li> <li>{{students|filter:{age: 16} }}</li> 4、json将Javascrip对象转成JSON字符串 <li>{{students|json}}</li> 5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位 <li>{{items|limitTo:-1}}</li> <li>{{str|uppercase|limitTo:3}}</li> 6、number数字格式化，可控制小位位数 <li>{{str|lowercase}}</li> <li>{{num|number:2}}</li> <li>{{items|orderBy: '':true}}</li> <li>{{students|orderBy: 'age': false}}</li> -
自定义过滤器
-
通过模块提供的filter犯法自定义过滤器
-
例子
<div ng-controller="DemoController"> <h4>{{info|capitalize:123}}{{name}}</h4> </div> <script> var App = angular.module('App', []); // 自定义过滤器 App.filter('capitalize', function () { return function (input, arg2) { //input指的是controller传过来的 //arg2指的是：传过来的123 return input[0].toUpperCase() + input.slice(1); } }); // 自定义控制器的 App.controller('DemoController', ['$scope', function ($scope) { $scope.name = '小明'; $scope.info = 'my name is '; }]); </script>
-
7.服务
-
$location对原生location的封装var App = angular.module('App', []); App.controller('DemoController', ['$scope', '$location', function($scope, $location) { $scope.title = '学习$location服务'; $scope.absUrl = $location.absUrl(); $scope.url = $location.url(); $scope.host = $location.host(); $scope.search = $location.search(); $scope.hash = $location.hash(); $scope.protocol = $location.protocol(); $scope.port = $location.port(); }]); -
$timeout&$interval<div ng-controller="DemoController"> <ul> <li>{{msg}}</li> <li>{{now|date: 'yyyy-MM-dd hh:mm:ss'}}</li> <li><button ng-click="stop()">停</button></li> </ul> </div> <script src="./libs/angular.min.js"></script> App.controller('DemoController', ['$scope', '$timeout', '$interval',function ($scope, $timeout, $interval) { $timeout(function () { $scope.msg = '执行了'; }, 3000); var timer = $interval(function () { $scope.now = new Date; }, 1000); $scope.stop = function () { $interval.cancel(timer); } }]); -
$filter格式化参数<ul ng-controller="DemoController"> <li>价格: {{price}}</li> <li>大写：{{str}}</li> <li>截取: {{str1}}</li> </ul> <script src="./libs/angular.min.js"></script> <script> var App = angular.module('App', []); // $filter是过滤器 App.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) { $scope.price = 11.11; var currency = $filter('currency'); $scope.price = currency($scope.price); $scope.str = 'hello angular'; var uppercase = $filter('uppercase'); $scope.str = uppercase($scope.str); $scope.str1 = $filter('limitTo')($scope.str, 2); }]); </script> -
$log打印调试信息<script> var App = angular.module('App', []); // 使用日志服务 App.controller('DemoController', ['$log', function ($log) { $log.info('普通信息'); $log.warn('警告信息'); $log.error('错误信息'); $log.log('打印信息'); $log.debug('调试信息'); }]); </script> -
$http用于向服务端发起异步请求var App = angular.module('App', []); App.controller('DemoController', ['$scope', '$http', '$log', function ($scope, $http, $log) { $http({ url: 'example.php', method: 'post',// method: 'get', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, params: { // get 参数 name: 'itcast', sex: '男' }, data: { age: 10} }).success(function (info) { // info 就是返回的数据 $log.info(info); }); }]); -
自定义服务
-
factory方法
var App = angular.module('App', []); // 定义一个名叫showTime的服务 App.factory('showTime', ['$filter', function ($filter) { var now = new Date(); var date = $filter('date'); return { now: date(now, 'y-M-d H:m:s') } }]); App.controller('DemoController', ['$scope', 'showTime', function($scope, showTime) { $scope.now = showTime.now; }]) -
service方法
var App = angular.module('App', []); // 自定义服务显示日期 App.service('showTime', ['$filter', function($filter) { var now = new Date(); var date = $filter('date'); this.now = date(now, 'y-M-d H:mm:ss'); }]); App.controller('DemoController', ['$scope', 'showTime', function($scope, showTime) { $scope.now = showTime.now; }]) -
value方法
var App = angular.module('App', []); // 自定义常量服务 App.value('author', 'itcast'); App.value('version', '1.0'); // 本质上一个服务,从表现形式上是一个常量,常量就是不变的值与变对量相对应,声明依赖调用服务 App.controller('DemoController', ['$scope', 'author', 'version', function($scope, author, version) { $scope.author = author; $scope.ver = version; }]);
-
8.模块加载
-
每一个内置服务都有一个对应的provider，例如
$logProvider、$httpProvider、$locationPorvider -
以
$log为例var App = angular.module('App', []); App.config(['$logProvider', '$filterProvider', function ($logProvider, $filterProvider) { // 禁用debug功能 $logProvider.debugEnabled(false); // 默认9个过滤器，通过配置可以新增一些过滤器 $filterProvider.register('capitalize', function () { // 新增一个过滤器 return function (input) { return input[0].toUpperCase() + input.slice(1); } }); }]); App.controller('DemoController', ['$scope', '$log', function ($scope, $log) { // 测试配置后的结果 $log.debug('debug'); $scope.str = 'hello angular'; }]); -
运行块,先运行，可以在此模块中初始化
var App = angular.module('App', []); // 直接运行$http、$rootScope服务 App.run(['$http', '$rootScope', function ($http, $rootScope) // 直接调用$http $http({ url: 'example.php', method: 'get' }); // 根作用域 $rootScope.name = '祖宗'; }]); App.controller('DemoController', ['$scope', function($scope) { $scope.name = '后代'; }])
9.路由
-
引入angular-route.js
<!-- AngularJS核心框架 --> <script src="./libs/angular.min.js"></script> <!-- 路由模块理解成插件 --> <script src="./libs/angular-route.js"></script> -
实例化模块，将路由依赖传进来
var App = angular.module('App', ['ngRoute']); -
配置路由模块
// 需要对路由模块进行配置，使其正常工作 App.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/index', { // template: 'index Pages!
', templateUrl: './abc.html' }) .when('/introduce', { template: 'introduce Pages!
' }) .when('/contact', { // template: 'contact US Pages!
', templateUrl: './contact.html', controller: 'ContactController' // 定义控制器 }) .when('/list', { templateUrl: './list.html', // 视图模板 controller: 'ListController' // 定义控制器 }) .otherwise({ redirectTo: '/index' }); }]); // 列表控制器 App.controller('ListController', ['$scope', '$http', function ($scope, $http) { // 模型数据 $http({ url: '10-02.php', }).success(function (info) { $scope.items = info; }); }]); App.controller('ContactController', ['$scope', '$http', function ($scope, $http) { $http({ url: 'contact.php' }).success(function (info) { $scope.content = info; }); }]); -
布局模板
<div class="wrapper"> <!-- 导航菜单 --> <ul> <li class="active"> <a href="#/index">Index</a> </li> <li> <a href="#/introduce">Introduce</a> </li> <li> <a href="#/contact">Contact Us</a> </li> <li> <a href="#/list">List</a> </li> </ul> <!-- 内容 --> <div class="content"> <!-- 占位符 --> <div ng-view></div> </div> </div> -
when中的参数
-
第一个参数，代表URL
-
第二个参数
a、template 字符串形式的视图模板 b、templateUrl 引入外部视图模板 c、controller 视图模板所属的控制器 d、redirectTo跳转到其它路由 -
获取路由传递过来的参数
<div class="wrapper"> <!-- 导航菜单 --> <ul> <li class="active"> <a href="#/index/5/abc/7">Index</a> </li> <li> <a href="#/introduce">Introduce</a> </li> <li> <a href="#/contact">Contact Us</a> </li> <li> <a href="#/list">List</a> </li> </ul> <!-- 内容 --> <div class="content"> <!-- 占位符 --> <div ng-view></div> </div> </div> // 依赖ngRoute模块 var App = angular.module('App', ['ngRoute']); // 需要对路由模块进行配置，使其正常工作 App.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/index/:id/:page/:p', { templateUrl: 'abc.html', controller: 'IndexController' }) .otherwise({ redirectTo: '/index' }); }]); // 提供了一个专门负责获取参数的一个服务$routeParams App.controller('IndexController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) { $scope.content = '练习路由功能'; console.log($routeParams); }]);
-
10.其他
-
转成jQuery对象，只实现jQuery部分方法
var box = document.querySelector('.box'); var btn = document.querySelector('button'); // 转成jQuery对象 box = angular.element(box); btn = angular.element(btn); btn.on('click', function () { box.animate({ fontSize: '40px' }, 400); }); -
bower，基于nodejs的一个惊天资源管理工具
1、依赖NodeJS环境和git工具。 2、npm install -g bower安装bower 3、bower search 查找资源信息 4、bower install 安装（下载）资源，通过#号可以指定版本号 5、bower info 查看资源信息 6、bower uninstall 卸载（删除）资源 7、bower init初始化，用来记录资源信息及依赖。