angularJs学习笔记－入门_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

angularJs学习笔记－入门_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

1.angularJs简介

　　angularJs是一个MV*的javascript框架（Model-View-Whatever,不管是MVVM还是MVC，统归MDV（model drive view））,其实是由google推出的SPA(single-page-application)应用框架。它的用于数据在后端和前端之间的双向绑定。这就意味着你在后台改变数据，这些变动立刻就会出现在view上。

　　在加载的时候，angular会将你的dom树和javascript转向一个angular app 。包含着angular指令和过滤器的html会被编译成一个树图，响应的范围和控制器会被附加在这个树上，内部的应用循环确保了视图和模型之间的数据绑定。每次模型被更新（可以通过ajax请求，也可以直接操作控制器），angular会重新运行它的 $digest循环，跟新数据绑定确保所有东西是同步的。

　　js代码是用一种命令的方式操作dom。而在angular中，直接操作dom是不被提倡的。dom由视图管理，data在scope中，方法在控制器里。

3. ng-app

　　(1)代码预览，引入angular文件

　　（2）游览器里效果

　　（3）源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <body>      <div class="" ng-app>        hello{{'world'}}      </div>  </body></html>

4. ng-model

　　(1)代码预览

　　（2）游览器里效果

　　(3)源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <body>    <div class="" ng-app>      your name :      <input type="text" name="name" value="" ng-model="yourname" placeholder="angular">      <hr>      hello {{yourname || 'angular'}}    </div>  </body></html>

5.ng-controller

　　(1)代码预览

　　（2）游览器效果

　　（3）源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>hello cynthia</title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>    <script type="text/javascript">    var app = angular.module('app',[]);    app.controller('helloCynthia',function($scope){      $scope.eleName = "cynthia"    })  </script>    <body>    <div class="" ng-app='app' ng-controller='helloCynthia'>      hello,{{eleName}}    </div>  </body></html>

6.ng-repeat

　　(1)代码预览

　　（2）游览器效果

　　（3）源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('ngrepeat',[])    app.controller('ngrepeatCtr',function($scope){      $scope.developers=[        {name:'wuqian',country:'china'},        {name:'cynthia',country:'usa'},        {name:'wupore',country:'canada'},        {name:'selene',country:'english'}      ]    })  </script>  <body>    <div class="" ng-app='ngrepeat' ng-controller='ngrepeatCtr'>      <ul>        <li ng-repeat='person in developers'>          {{person.name}} from {{person.country}}        </li>      </ul>    </div>  </body></html>

7.example

　　(1)代码预览

　　（2）游览器效果（用户在input里输入后，点击button，在下方显示输入,但是目前显示undefined。。。）　

　　（3）源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('appName',[]);    app.controller('controllerName',function($scope){      $scope.clickName = function(){        $scope.message = 'Name : ' + $scope.userInput;      }    })  </script>  <body>    <div class="" ng-app='appName' ng-controller='controllerName'>      <p>        what's your name ?      </p>      <br>      <input type="text" name="name" placeholer="input your name here" ng-model＝‘userInput’>      <button type="button" name="button" ng-click='clickName()'>click here</button>      <h3 id="message">{{message}}</h3>    </div>  </body></html>

8.filters 过滤器

　　angular提供的过滤器和unix中的管道pipeline相似。比如我们要在网页中显示价格$可以这样写

　　（1）源码预览

　　（2）游览器中效果

　　（3）源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <body>      <div class="" ng-app>        <span>iphone : {{63573 | currency}}</span>      </div>  </body></html>

9.利用filters做删选

　　（1）代码预览

　　（2）游览器效果

　　（3）源码　

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('ngrepeat',[])    app.controller('ngrepeatCtr',function($scope){      $scope.developers=[        {name:'wuqian',country:'china'},        {name:'cynthia',country:'usa'},        {name:'wupore',country:'canada'},        {name:'selene',country:'english'}      ]    })  </script>  <body>    <div class="" ng-app='ngrepeat' ng-controller='ngrepeatCtr'>      <input type="text" name="name" value="" ng-model='search'>      <ul>        <li ng-repeat='person in developers | filter:search'>          {{person.name}} from {{person.country}}        </li>      </ul>    </div>  </body></html>

10.自定义filter

　　(1)代码预览

　　（2）游览器效果（首字母变大写）

　　（3）源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>hello cynthia</title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('app',[]);    // 自定义filter    app.filter('capt',function(){      return function(input,param){        return input.substring(0,1).toUpperCase()+input.substring(1);      }    })  </script>  <body>    <div class="" ng-app='app'>      <span>{{'this is some text' | capt}}</span>    </div>  </body></html>

11.services

　　在controller之间共享数据对我们是很有用的，但是每个controller都有自己的scope，所以我们不能将其绑定到其他的controller上。为此angular提供了的解决方案是services。

　　angular内置了很多services，比如http请求、异步promises编程模式。这也是angular的核心（依赖注入）的关键。

　　services都是单例的，也就是说在一个应用里，每个service对象只会被实例化一次。它主要负责提供一个接口把特定的函数需要的方法放在一起。最常见的方法是angular.module API的factory方式：

　　例子：通过services实现oneCtrl和twoCtrl之间共享一个数据 user

　　（1）源码预览

　　（2）游览器里面效果

　　（3）源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>hello cynthia</title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('app',[]);    // 通过services实现oneCtrl和twoCtrl之间共享一个数据 user    app.factory('userInfor',function(){      var user={        name : 'Angular.js'      }      return user;    })    app.controller('oneCtrl',function($scope,userInfor){      $scope.user = userInfor;    })    app.controller('twoCtrl',function($scope,userInfor){      $scope.user = userInfor;    })  </script>  <body>    <div class="" ng-app='app'>      <div class="" ng-controller='oneCtrl'>        oneCtrl :        <input type="text" name="name" value="" ng-model='user.name'>      </div>      <div class="" ng-controller='twoCtrl'>        twoCtrl :        <input type="text" name="name" value="" ng-model='user.name'>      </div>    </div>  </body></html>

12.ng-show 和 ng-hide

　　(1) 源码预览

　　（2）游览器里效果：点击按钮下面的内容出现／隐藏

　　（3）源码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <body>    <div class="" ng-app>      <button type="button" name="button" ng-init='shouldShow=true' ng-click='shouldShow = !shouldShow'>Flip the shouldShow variable</button>      <div class="" ng-show='shouldShow'>        <h3 id="showing-shouldShow">showing {{shouldShow}}</h3>      </div>      <div class="" ng-hide='shouldShow'>        <h3 id="hiding-shouldShow">hiding {{shouldShow}}</h3>      </div>    </div>  </body></html>

13.

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

See all articles