Angular学习笔记

最新推荐文章于 2021-08-22 18:25:08 发布
最新推荐文章于 2021-08-22 18:25:08 发布
阅读量1k 收藏 14
点赞数 3
分类专栏： 学习笔记 前端框架 angular 文章标签： angular angular学习笔记 angular基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42793833/article/details/87687076
版权

Angular学习笔记

1.初识angular

  1. 安装npm install angular

  2. 在页面的HTML部分添加angular标签

    <html lang="en" ng-app="App"></html>//表示html标签内可以作为angular的view部分

  3. 在JavaScript标签中定义angular模块

    const app = angular.module('app',[])

  4. 定义控制器（controller）最为链接model和view的桥梁

    app.controller('StudentController',['$scope',function($scope){
    $scope.starts = [
        {name:"周杰伦",sex:'男'},
        {name:"刘德华",sex:'男'}
    ]
}])

  5. 将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指令

  1. 内置指令

    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>

  2. 自定义指定，通过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: '<h1>hello AngularJs</h1>'
        //templateUrl:'./list.html'
    }
})
3.数据绑定

  1. 单项绑定

    1. ng-bind

    2. {{}}，当出现闪烁现象时，在标签属性上添加ng-clock指定、

       <li ng-cloak>{{name}}{{age}}</li>

    3. 绑定多个属性

       <li ng-bind-template="{{name}}{{age}}"></li>

  2. 双向数据绑定

    1. ng-model属性添加到表单中实现view向controller的传递

      <input type="text" ng-model="msg">
<h4>{{msg}}</h4>

    2. ng-init初始化模型model数据

      <div ng-controller="DemoController" ng-init="name='itcast';age=10">
	<h1>{{name}}</h1>
	<h2>{{age}}</h2>
</div>
4.事件处理

  1. ng-click、ng-dblclick、ng-blur等方法

  2. 例子

    <button ng-dblclick="double()">双击</button>

var App = angular.module('App', [])
App.controller('DemoController', ['$scope', function ($scope) {
    $scope.double = function () {
        alert('我被双击了');
    }
}])
5.循环中的逻辑处理

  1. ng-repeat、ng-switch、ng-switch-when、on

  2. 例子

    <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. 在{{}}中使用|来调用过滤器，使用：传递参数

  2. 内置过滤器

    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>

  3. 自定义过滤器

    1. 通过模块提供的filter犯法自定义过滤器

    2. 例子

      <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.服务

  1. $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();
}]);

  2. $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);
    }
}]);

  3. $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>

  4. $log打印调试信息

    <script>
    var App = angular.module('App', []);
	// 使用日志服务
    App.controller('DemoController', ['$log', function ($log) {
        $log.info('普通信息');
        $log.warn('警告信息');
        $log.error('错误信息');
        $log.log('打印信息');
        $log.debug('调试信息');
    }]);
</script>

  5. $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);
    });
}]);

  6. 自定义服务

    1. 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;
}])

    2. 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;
}])

    3. 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.模块加载

  1. 每一个内置服务都有一个对应的provider，例如$logProvider、$httpProvider、$locationPorvider

  2. 以$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';
}]);

  3. 运行块,先运行，可以在此模块中初始化

    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.路由

  1. 引入angular-route.js

    <!-- AngularJS核心框架 -->
<script src="./libs/angular.min.js"></script>
<!-- 路由模块理解成插件 -->
<script src="./libs/angular-route.js"></script>

  2. 实例化模块，将路由依赖传进来

    var App = angular.module('App', ['ngRoute']);

  3. 配置路由模块

    // 需要对路由模块进行配置，使其正常工作
App.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/index', {
        // template: '<h1>index Pages!</h1>',
        templateUrl: './abc.html'
    })
        .when('/introduce', {
        template: '<h1>introduce Pages!</h1>'
    })
        .when('/contact', {
        // template: '<h1>contact US Pages!</h1>',
        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;
    });
}]);

  4. 布局模板

    <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>

  5. when中的参数

    1. 第一个参数，代表URL

    2. 第二个参数

      a、template 字符串形式的视图模板
b、templateUrl 引入外部视图模板
c、controller 视图模板所属的控制器
d、redirectTo跳转到其它路由

    3. 获取路由传递过来的参数

      <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.其他

  1. 转成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);
});

  2. 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初始化，用来记录资源信息及依赖。
逆风奔袭
关注
专栏目录
Angular 学习笔记
weixin_43571751的博客
04-28 2861
Angular 学习笔记环境搭建 环境搭建 安装npm，通过npm或cnpm安装angular。 npm install -g @angualr/cli 或 npm install -g @angualr/cli
Angular学习笔记（一）
weixin_34396103的博客
10-03 88
2019独角兽企业重金招聘Python工程师标准>>> ...
Angular笔记
qq_41466440的博客
03-17 289
angular笔记
Angular
weixin_44169596的博客
08-22 1947
Angular 1.框架背景 Angular 是一个由 Google维护的开源JavaScript框架，用于在HTML和JavaScript中构建Web应用程序，是三大框架之首。 不管是1还是2，Angular最显著的特征就是其整合性。涵盖了M、V、C/VM等各个层面，不需要组合、评估其它技术就能完成大部分前端开发任务。这样可以有效降低决策成本，提高决策速度，对需要快速起步的团队是非常有帮助的。 由于它是从一个用来做原型的框架演化而来的，加上诞生时间很早（2009年，作为对比，jQuery诞生于2006年）
angular学习笔记
08-22
### Angular学习笔记知识点详解 #### 一、AngularJS指令概览 AngularJS 是一款非常强大的前端框架，它通过一系列的指令让HTML变得更为生动且功能丰富。这些指令以`ng-`开头，允许开发者轻松地扩展HTML的功能。下面...
angular 学习笔记
最新发布
12-20
在Angular的学习过程中，我们需要掌握以下几个核心概念和技能： 1. **架构对比**： - AngularJS（1.x）基于MVW（Model-View-Whatever）架构，依赖注入(DI)和脏检查机制。 - Angular（2+）采用MVVM（Model-View-...
Angular学习笔记之angular的$filter服务浅析
01-19
首先，介绍下$filter服务： 1、$filter是用来进行数据格式化的专用服务； 2、AngularJS内置了currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy这8个filter； 3、filter可以嵌套使用，...
Angular学习笔记（1）
小嬴布菱的博客
05-24 173
Angular angular是用于构建用户界面的JavaScript框架，主要被用来开发单页面应用程序。 下载angular： 下载node.js，安装node.js的稳定版本 安装cnpm:npm install -g cnpm 安装Angular: npm install -g @angular/cli或者cnpm install -g @angular/cli 使用ng -v 查看Angular是否安装成功，以及查看Angular版本 创建Angular项目： 5. 在cmd中找到项目目录 6.
angular学习笔记(1)
Lemonade_HH_的博客
10-18 498
angular学习笔记(1) 1.表达式： （1）表达式特性： 所有的表达式都在其所属的作用域内部执行，并有权访问本地$scope的权限如果表达式发生了TypeError或者ReferenceError错误不会抛出异常不允许使用任何流程控制（条件控制，if/else）可以接受过滤器或者过滤器链。 （2）解析Angular表达式 （$parse、$watch）
Angular入门学习笔记
热门推荐
K One
07-10 1万+
Angular学习笔记，Angualr安装，Angular入门，Angular实战,ANgualr路由守卫
angular 笔记
xiaoyu的博客
07-14 308
1.angular.extend 依次将第二个参数及后续的参数的第一层属性（不管是简单属性还是对象）拷贝赋给第一个参数的第一层属性。 如果是对象，则是引用的是同一个对象，并返回第一个参数对象。 所以注意在修改对象是考虑对象的地址，最好在使用extend的时候直接添加对象。
Angular深度解析：依赖注入与实战技巧
"Angular学习笔记包含了Angular的基本概念、核心特性及常用指令的介绍，涉及依赖注入、控制器、模板、表单处理、数据绑定、样式控制、服务、过滤器、路由和HTTP交互等内容。" Angular是一个流行的前端JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值