热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AngularJs之初

很久以前就听人说起angularjs,但一直都没有深入了解过。直到最近才在自己心里有了一个准确的定义。和相濡以沫多年的函数库JQuery相比,angular更像一个框架。对,就是一

  很久以前就听人说起angularjs,但一直都没有深入了解过。直到最近才在自己心里有了一个准确的定义。和相濡以沫多年的函数库JQuery相比,angular更像一个框架。对,就是一个框架,相比之下的话同样是前端开发框架的Ext就应该是一个胖子,而angular就是一个瘦子。Ext提供了一套几乎可以不写Html和Css就能创造页面的解决方案,除此之外还包括页面的逻辑和数据处理方案。angular则只提供了页面逻辑和数据处理的方案。也许和Ext相比它算是一个“不健全的”前端框架,但这也大大的提高了框架使用的灵活性。

我是怎么入门的?

  了解类似框架,最头疼的是找不到好的突破口。很多时候我们都希望能看到一个简单的案例,通过案例可以对框架有一个清晰的认识。在github上有个angular-seed的代码库,以一个最简单的案例介绍了angular打开方式。附代码地址:https://github.com/angular/angular-seed.git

  悄悄的说一下,如果使用WebStorm做开发,在创建项目的时候可以选择AngularJs,WebStorm会自动下载angular-seed。就像.Net程序员在创建MVC项目的时候VS会自动填充一些基础代码。

  安装好的项目结构如下:技术分享

  项目介绍:

  红色框选部分是重点,新手可以忽略其他文件。

  这是一个单页应用,index.html是页面入口,app.js是angularjs配置文件。

  所以在访问的时候我们应该访问的是:http://xxx.xxx.xxx/index.html

  components -- 资源文件夹(强迫症患者可以重命名或将对应资源移动到其他文件夹下)

  view -- 存储视图(内容页)和 viewmodel(view.js) 。

      view.js包含路由(页面的访问路径配置)和控制器(controller)。

      页面中需要用到的变量等相关信息需要在controller中配置。

      目前是空的

  view1和view2分别存储的是两个视图,运行后访问index.html即可访问。

  

  

  

重点照顾对象:

  app.js 

    app.js中angular.model函数的第二参数是一个数组,这个数组里列举的内容便是整个项目运行时依赖内容,比如:view1.js,view1.js中定义的angular.model名称为myApp.view1,可以将其理解为是view1.js这个模块的命名空间,那么在设置app.js的时候就需要加入这个命名空间。如果新建一个myApp.view10那么app.js里便需要加入对myapp.view10的引用。

    除此之外app.js里还设置了一个默认地址otherwise,这个有点404的感觉,当找不到对应页面的时候就会跳转到这个地址上,这里默认的是view1。所以在访问index.html的时候会直接访问到view1.html。

    请注意,app.js里$routeProvider.otherwise({redirectTo:‘/view1‘}),这里的/view1并不是view1.html,而是路由配置表里的一个路径/view1,而在view1.js中将这个路径指向了view1.html。这两者的对应关系是建立在页面路由上的。

   index.html

    这是一个看似简单却暗藏玄机的页面。首先是这一句

, ng-view指令表示,所有页面都将在这里展示,感觉就像老朋友iframe。

    除此之外页面上所需要的js资源都需要在这里加载

  

 关于Hello Word:

  上效果~~

  下面是对view1.html的修改和运行结果。

技术分享

<p>This is the partial for view 1.p>
<input type="text" ng-model="word">
<h3>{{word}}h3>

  js代码呢?噢,对不起,我没改js。是的,就这么简单,并不需要修改js文件。

  这一点和knockout有点像(也许是knockout和angular有点像,至于谁先谁后就不去考究了,反正我是先用knockout)。代码中的word是一个变量,我们将这个变量和input进行了绑定ng-model="word"然后再下面进行输出{{word}},如果要在js里获取就应该是这样:

view1.js:

‘use strict‘;

angular.module(‘myApp.view1‘, [‘ngRoute‘])

.config([‘$routeProvider‘, function($routeProvider) {
  $routeProvider.when(‘/view1‘, {
    templateUrl: ‘view1/view1.html‘,
    controller: ‘View1Ctrl‘
  });
}])

.controller(‘View1Ctrl‘, [function() {
    var word= this.word;
}]);

在controller中使用this.word可获取或设置页面上的word的值。

接下来再叨叨一个常用的指令ng-repate。这次对view2进行如下修改,上图文~~

技术分享

view2.html:

<p>This is the partial for view 2.p>


<h2>ng-repeat部分h2>
<div ng-repeat="item in list">
  这是{{item}} 它的index是:{{$index}}
div>

view2.js:

‘use strict‘;

angular.module(‘myApp.view2‘, [‘ngRoute‘])

.config([‘$routeProvider‘, function($routeProvider) {
  $routeProvider.when(‘/view2‘, {
    templateUrl: ‘view2/view2.html‘,
    controller: ‘View2Ctrl‘
  });
}])

.controller(‘View2Ctrl‘, [‘$scope‘,function($scope) {
    $scope.list=["item1","item2","item3","item4"];
}]);

js:

  controller中对模块的引用方式很特殊,在controller的第二个参数里,前面是要引用的模块名称,最后一个元素是一个函数,函数里的参数代表引用模块。这里的$scope(作用域,可以理解为程序上下文)它是angular应用程序中视图(HTML)和控制器(Javascript)之间的纽带 ,主要是在控制器和页面之间进行数据传递。所以我们可以把list传递到页面中使用。 值得一提的是,当list内容发生变化的时候,页面内容也会自动刷新。

html:

  item指list中的元素,{{item}}是在页面打印这个元素,item可以是字符串,对象,数组......,反正它可以很复杂。$index是当前循环的索引编号,等同for(var i=0....中的i。

到这里大家对angularjs应该是有一个基本概念了。想要了解更多关于angulajs的控制器、内置指令等相关信息,请 百度 或 谷歌 一下。

AngularJs之初


推荐阅读
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 在项目中动态的添加iframe,这个是没问题的,但时在我想往动态生成的iframe中动态插入js脚本的时候,使用append方法$(“#test”).contents().find ... [详细]
  • JavaScript使ifram跨域相互访问及与PHP通信的实例_javascript技巧
    iframe与主框架相互访问方法1.同域相互访问假设A.html ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 两个条件,组合控制#if($query_string~*modviewthread&t(&extra(.*)))?$)#{#set$itid$1;#rewrite^ ... [详细]
  • 本文详细介绍了如何利用Duilib界面库开发窗体动画效果,包括基本思路和技术细节。这些方法不仅适用于Duilib,还可以扩展到其他类似的界面开发工具。 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • 使用Jsoup解析并遍历HTML文档时,该库能够高效地生成一个清晰、规范的解析树,即使源HTML文档存在格式问题。Jsoup具备强大的容错能力,能够处理多种异常情况,如未闭合的标签等,确保解析结果的准确性和完整性。 ... [详细]
  • CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中,iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表,包括编写脚本文件 `/usr/local/sbin/iptables.sh`,并使用 `iptables -F` 清空现有规则。此外,还深入探讨了 NAT 表的配置方法,帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
  • 本文详细介绍了 Sublime Text 3 在 2021 年的激活密钥及其在线激活方法。用户可以通过提供的链接访问云海天教程,获取更多详细的激活码信息和操作步骤。此外,文章还提供了安全可靠的激活方案,帮助用户顺利激活软件,提升编程效率。 ... [详细]
  • tabnine 破解_最新在线免费激活2022.07.18
    (tabnine破解)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。Intell ... [详细]
  • pycharm激活码 2021 3月最新注册码
    pycharm激活码 20213月最新注册码,https:www.yht7.comidea。详细ieda激活码不妨到云海天教程 ... [详细]
author-avatar
HurricaneCC
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有