angular.js学习笔记--概念总结
好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!)
废话不多说,开始!
$rootScope 和 $scope:
$rootScope是angular中最接近全局作用域的对象,是所有$scope对象的最上层!
$scope对象就是一个普通的js对象,我们可以在其上随意修改和添加属性,并且其在angular中充当数据模型,它是所有属性都可以自动呗视图访问到,但是它并不负责数据的处理和操作!
指令:将DOM元素增强为可复用的DOM组件的属性或元素
ng-app指令规定了angular的作用域,如果没有该指令angular就不会运行,只有被具有ng-app属性的DOM元素包含的元素才 会受AngularJS影响。
ng-model 该指令将输入框的值跟controller里的$scope model进行双向绑定,使用该指令实现数据绑定
ng-init 该指令在程序运行前设定一个初始值 如:
1 | < b ng-init='name = "Ari Lerner"'>Hello, {{ name }}</ b > |
ng-controller 该指令指定一个controller控制器,ng-controller声明所有被它包含的元素都属于某个控制器,并且该指令为这个DOM元素创建了一个新的$scope作用域,且将它嵌套在$rootScope内!
ng-click 该指令给DOM元素注册一个点击事件监听器,可以在点击触发表达式的内容,也可以调用在controller中绑定在$scope上的函数
ng-repeat 该指令遍历一个数据集中的每个元素,可以使用p in arr来变量数组或对象中的每个值,或者用(name, val) in object来遍历对象中的属性名和值
表达式:
表达式一般是指{{}}中的部分
-
所有表达式都在scope这个context里被执行,因此可以使用所有本地 $scope 中的变量。
-
如果一个表达式的执行导致类型错误或引用错误,这些错误将不会被抛出。
-
表达式里不允许任何控制函数流程的功能(如if/else等条件语句)
-
表达式可接受一个或多个串联起来的过滤器。
模块:
使用angular.module()方法声明模块这个方法能够接受两个参数, 第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。
angular.module(’name’, [ ])
注意:
在angular中使用对象属性代替使用对象本身来进行数据绑定是最佳体验,如:
在html中用{{test.nam}}替换{{name}},在controller里用$scope.test = {name: ‘value’}代替$scope.name = “value”;这里主要是用对象的引用传递来代替变量值传递
控制器:
通过ng-controller指令在DOM中指定控制器,并且控制器之间是可以进行嵌套的,子控制器通过原型继承来继承父控制器中的属性,方法等!注意,在控制器中进行dom操作并不是好的实践,尽可能保持控制器的短小精悍!
1 2 3 | app.controller( 'my' , [ '$scope' , '$filter' , function ($scope, $filter) { $scope.test = {name : 11}; }]) |
过滤器:
在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如:
{{ name | uppercase }}//转换成大写
自定义过滤器:(string只留a-zA-Z字符串)
1 2 3 4 5 6 | app.filter( 'string' , function () { return function (input) { if (input) return (input+ "" ).replace(/\d*\W*/g, '' ); } }) //这里的input为输入的字符串 |
1 2 3 4 5 6 7 8 9 10 11 12 | var app = angular.module(‘app’, [ ’ngRoute’, ‘appCtrl ' ]) app.config(function($routeProvider) { $routeProvider.when(‘/index’, { templateUrl: ’tuples/index.html’, controller: ‘indexCtrl' }).otherwise({ redirectTo: ‘/index' }) }) |
1 2 3 4 5 6 7 8 9 | var app = angular.module(‘app’, []); app.factory(‘myService’, [‘$http’, function ($http) { var doRequest = function () {} return { mot: functions(name) { return doRequest() } } }]) |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战