伏龙阁资源网

AngularJs基本特性解析(一)
站长资源 2024/11/30 佚名
2 0

现在的前端项目中基本上都会用到angularjs框架，之前并不了解这个框架，也是因为最近接手的项目，所以打算好好的学习下它。之前都是搞pc端，现在接手的是移动端的项目，移动端UI框架用的是ionic＋vordova，没有用bootstrap，主要做的是ios+安卓的app界面，ionic这个框架也不太了解，也需要花时间好好熟悉下。angularjs学习小白一枚，欢迎大神指正。

AngularJs是什么？

简单来说，即javascript的一个框架，通过script标签添加到网页中。即我们使用angularjs时，需要引入下面的代码。

<script src="/UploadFiles/2021-04-02/angular-1.0.1.min.js">


通常建议把脚本放在<body>元素的底部，作用是：提高网页加载速度。因为html加载不受制于脚本加载。




AngularJs的作用？ 




AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

"背后"添加代码。

"text-align: center">AngularJs基本特性解析(一) 


AngularJs表达式 




AngularJS 表达式写在双大括号内：{{ expression }}。




AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。




AngularJS 将在表达式书写的位置"输出"数据。




AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。





<!doctype html>
<!-- 标记angularjs处理整个html页并引导应用 -->
<html ng-app> 
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular-1.0.1.min.js">


AngularJs在html中的应用




主要通过ng-directive扩展html，angularjs指令是以ng作为前缀的html属性，包含有四大特性：mvc，模块化，指令系统（directive），databinding




ng-init:该指令初始化angularjs应用程序变量。比如下面的列子：







<!doctype html>
<!-- 标记angularjs处理整个html页并引导应用 -->
<html ng-app> 
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular-1.0.1.min.js">


ng-app:该指令表示定义一个angularjs应用程序。通常放在html后面，也可以在局部使用ng-app指令，比如<div ng-app>则angularjs脚本仅在该div中运行,即表明从此处开始，所有内容均为angularjs进行管理。




ng-model:该指令是指把元素值（比如输入框的值）绑定到应用程序中。




ng-bind：该指令是把应用程序数据绑定到html视图中。使用相应的指令，即可利用angularjs操作html页面。具体怎么使用，我们来看看代码。




AngularJs基本特性解析(一)


此时利用ng-model绑定到setname模型变量上，当在输入框中输入值时，相应的setname也会变化。可自行贴码测试。




关于$scope解释




$scope是什么？有什么作用？如何使用它？




简单来说，scope是一个pojo（plainoldjavascriptobject）,类似于一个对象，有属性和方法， scope是一个pojo（plainoldjavascriptobject）,类似于一个对象，有属性和方法，scope提供了watch()和 watch()和apply()工具方法。angularjs的mvc全部借助于$scope进行的。




特性：1.是表达式的执行环境（或者作用域）




2.scope是一个树型结构，与dom标签平行，其上含有一个 scope是一个树型结构，与dom标签平行，其上含有一个rootscope处于最顶层。




3.scope会继承父 scope会继承父rootscope的属性和方法。




4.$scope可以传播事件，类似于dom，可以向上传播也可以向下。




5.$scope不仅是mvc的基础，也是后面实现双向绑定的基础。




AngularJs的组成部分




模板：即编写的html和css的文件，展现应用的视图。angularjs可以在html中构建自己的html标记！

控制器:与ajax不同，不需要另外编写侦听器或dom控制器，因为它已经内置到angularjs中。 好处：便于编写，测试，维护和理解。




模型数据：模型是从angularjs做用域对象的属性引申的。模型的数据可能是js对象，数组或基本类型，但都属于angularjs作用域对象。




如何理解angularjs中的作用域？




即一个作用域可以视作模板，模型和控制器协同工作的粘接器，angularjs使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但他们两者确实时同步的！任何对于模型的更改都会即时反映到视图上，任何视图的更改都会被立刻体现在模型中。




视图：在angularjs中，一个视图是模型通过html模板渲染之后的映射。即不论模型什么时候发生变化，angularjs会实时更新结合点，随之更新视图。




还是贴码来看，更加直观！







<!doctype html>
<html ng-app="HelloAngular"> 
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular-1.0.1.min.js">


我们来看看controller的应用，即控制器，即控制器通过操作数据，将其进行绑定，展现在html页面上。




AngularJS 模块（Module） 定义了 AngularJS 应用。




AngularJS 控制器（Controller） 用于控制 AngularJS 应用。




ng-app指令定义了应用, ng-controller 定义了控制器。我们用上面的列子来看：




AngularJS模块定义应用：







var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular





angularjs控制器控制应用：







myModule.controller("helloAngular", ['$scope',
function HelloAngular($scope) {
$scope.value = {
name: 'jiangting'
};
}
]);





了解前端mvc




关于controller特性：




1.不要试图去服用controller，一个控制器一般只负责一个小块视图




2.不要直接在controller中操作dom，这不是其职责




3.不要在controller里面做数据过滤的操作，ng有filter服务


4.不要在controller里面做数据格式化，ng有很好用的表单控件


5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过 filter服务4.不要在controller里面做数据格式化，ng有很好用的表单控件5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过scope进行调用




下面看下如何自定义指令系统，代码如下：







<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular-1.0.1.min.js">


directive中，后面返回有三个参数，其中template中指所插入的html标签。现在我门自己来写一段html代码，看看如何将其变为angularjs的写法。




原静态html代码如下：







<ul>
<li>
<span>new1</span>
<p>just a test page1</p>
</li>
<li>
<span>new2</span>
<p>just a test page2</p>
</li> 
</ul>





将其改版为angularjs的写法如下：







<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular-1.0.1.min.js">


以上所述是小编给大家介绍的AngularJs基本特性解析(一)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！


                                

                                

                                     

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.wwsws.com
                                            
                                                伏龙阁资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            39,976影音资源
                                        

                                        

                                            44,792技术资源
                                        

                                        

                                            21,817软件资源
                                        

                                        

                                            651,128站长资源
                                        

                                    

                                

                            

                            
                            
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/30

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接