angularJs学习笔记－入门_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

showing {{shouldShow}}

hiding {{shouldShow}}

집

웹 프론트엔드

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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7696

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.