AngularJS_AngularJS로 빠른 시작-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

AngularJS_AngularJS로 빠른 시작

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:06 PM

angularjs 빠른 시작

怎么样快速了解AngularJS？

相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引。
其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性，下面我就从几个例子一步一步的讲解AngularJS吸引人的东西并且实际项目中是怎么使用ng的。

首先还是从第一个经典的Hello world 案例说起，如下HTML（如果你在墙外，可以直接访问https://angularjs.org ，右边就有运行效果）。

<!doctype html>
<html ng-app>
 <head>
  <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script></script>
 </head>
 <body>
  <div>
   <label>Name:</label>
   <input type="text" ng-model="yourName" placeholder="Enter a name here">
   <hr>
   <h1>Hello {{yourName}}!</h1>
  </div>
 </body>
</html>

로그인 후 복사

会一点HTML的人都知道，这个界面有个input输入框，下面有个

的标题，内容是 Hello {{yourName}}!。

实现的效果是：当用户在input输入框输入内容时，下面的h1标题内部实时显示 ”Hello 输入的内容!"

与普通的HTML不同之处有以下几点：

html标签上加了一个 ng-app属性，意思是整个HTML都属于AngularJS控制；
input输入框加了一个 ng-model="yourName"，这样就表明input的value与内存中的变量yourName是双向绑定的，在输入框输入”world“，内存中的yourName变量就变成了”world“，反之亦然；
h1标签内部有个{{yourName}}，这个表示内存中的yourName属性和h1节点的内容实现了双向绑定，yourName为”world“后，h1的内容就会变成”Hello world!“，"{{}}"是ng的表达式。

传统的做法：

在input上添加change事件，当触发change事件后，获取input输入框的内容，再组合字符串，通过DOM操作修改h1的innerHTML，前提可能要给 input和h1加上id或者name属性。
通过这个例子.
大家应该能够很明显的感觉到AngularJS的优势了，不用写一行JS代码，就能实现一个很完美的功能。

上面的例子只是展示了一个简单的双向绑定功能，AngularJS既然是一个MV*框架，上面说的yourName是Model，HTML是View，那么*（Controller或者ViewModel）去哪了？我稍微修改下上面的例子:

<!doctype html>
  <html ng-app>
  <head>
    <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script>
  </head>
  <body>
    <div ng-controller="testCtrl">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <button ng-click="clearInputValue()">Clear Input Value</button>
      <hr>
      <h1>Hello {{yourName}}!</h1>

    </div>
    <script>
      function testCtrl($scope) {
        $scope.yourName = "world";
        $scope.clearInputValue = function () {
          $scope.yourName = "";
        }
      }
    </script>
  </body>
</html>

로그인 후 복사

可以看到我修改的地方：

在div上加了一个ng-controller="testCtrl"，表示这个DIV内部所有元素都属于testCtrl管辖；
同时script加了一个函数testCtrl，这个函数有个$scope的参数，并且函数内给$scope.yourName赋了一个”world“的值，而且还有个clearInputValue函数，这个$scope大家可以理解为ViewModel，ng Model的载体（或者说上下文），所有模板中使用的ng变量都在$scope上，初始化给$scope.yourName赋值说明input输入框的Value默认就为”world“；
界面上多了一个Button，button上有个ng-click="clearInputValue()"，ng-click表示给这个Button绑定了一个click事件，点击Button执行clearInputValue函数，这个函数给$scope.yourName赋值了空字符串，清空了输入框的值。

从这个例子中大家可以清楚的看到AngularJS是怎么样实现MV*的，具体传统的做法大家可以自行在脑海中想想，ng的实现方式是不是更加的简单，至此你有没有被ng所吸引？？？

大家看了上面的例子后，或许有些人就开始疑问了，每个controller绑定一个函数，这个函数的第一个参数是$scope，所有的数据和方法都在$scope上下文里面，而且这个函数是全局函数，如果界面上有很多controller呢？不会有很多个全局函数吧？（注意：这种全局函数的方式在1.3.x版本后已经被取消了）

哈哈，其实ng早就想到了这一步，ng有自己的一套模块加载机制，而且还引入了依赖注入。

我再次修改了上面的例子：

<!doctype html>
<html ng-app="app">
 <head>
   <meta charset="utf-8"/>
   <style>
     ul {
       list-style : none;
       clear   : both;
     }
     ul > li {
       list-style : none;
       float    : left;
       margin-left : 15px;
       display   : block;
     }
     .active {
       background : #1f292e;
       color   : #FFFFFF;
     }
     a {
       color : #000066;
     }
     .active > a {
       color : #FFFFFF;
     }
    [ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}.ng-animate-start{border-spacing:1px 1px;-ms-zoom:1.0001;}.ng-animate-active{border-spacing:0px 0px;-ms-zoom:1;}
   </style>
 </head>
 <body ng-cloak>
   <div ng-controller="testCtrl">
     <ul>
       <li ng-class="{'active':currentMenu == 'menu1'}"><a href="javascript:;" ng-click="selectMenu('menu1')">菜单1</a>
       </li>
       <li ng-class="{'active':currentMenu == 'menu2'}"><a href="javascript:;" ng-click="selectMenu('menu2')">菜单2</a>
       </li>
     </ul>
     <br><br>

     <div ng-if="currentMenu == 'menu1'">
       我是菜单1里面的内容
     </div>
     <div ng-if="currentMenu == 'menu2'">
       我是菜单2里面的内容
     </div>

   </div>
   <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script>
   <script>
     angular.module("app", []);
     angular.module("app").controller("testCtrl", ["$scope", function ($scope) {
       $scope.currentMenu = "menu1";
       $scope.selectMenu = function (menu) {
         $scope.currentMenu = menu;
       }
     }]);
   </script>
 </body>
</html>

로그인 후 복사

我给ng-app指定了一个名称叫”app“，同时js代码使用angular.module("app", []);定义了一个名称为”app“的module，同时用这个app module 的controller方法定义了一个testCtrl；定义module函数是angular对象上的静态方法，第一个参数传名称，第二个参数是一个数组，这个数组表示这个module所引用的其他module，在这个例子中我们没有使用任何其他的module，所以传入一个空的数组，如果第二个参数不传，表示获取名称为”app“的module；

这个例子是大家在项目中经常遇见的菜单模块，页面共有2个菜单，默认选中菜单1，当选择哪个菜单，下面的内容区域就显示选中菜单的内容，同时菜单的样式需要修改为选中状态；

关于显示哪个内容区域我使用了ng-if="currentMenu == 'menu1'"和ng-if="currentMenu == 'menu2'",顾名思义，ng-if意思是如果表达式为真编译并且显示ng-if内部的模板元素，如果为假，不显示任何内容；
至于选中菜单的样式，我使用了ng-class="{'active':currentMenu == 'menu1'}",意思就是currentMenu 为menu1时添加class ”active“，否则没有任何样式。

上面的3个例子，很好的展示了如何开启一个ng的web，并且如何模块化的使用ng，如果你都看懂了,说明你已经掌握了如何使用ng-controller、数据的双向绑定，写模板，并且初步接触了很多内置的指令（如：ng-app,ng-controller,ng-model,ng-if,ng-class,ng-click）。

说实话，你已经会了很多了。

当然ng还是有很多东西等你慢慢发觉，如：

用ngRoute模块写SPA（单页程序）；
还有更多丰富的指令，学会自己封装自定义指令；
ng的过滤器功能（Filter）；
ng的表单验证功能；
使用ng的服务功能（service、provider和factory）；
ng scope树形结构，并且在不同控制器之间通过事件发布订阅机制通信；
$http和$resource模块与服务端API进行交互操作；
使用animate模块做一些动画特效；
单元测试。
说明：上面的例子为了展示方便，所有的js css 都写在了html页面里面，实际项目中应该分开写在独立的文件中。

最后的例子

大家可以根据上面学到的知识，自己做个todolist的例子，默认界面上有2个todo，一个完成一个未完成，每个todo前面有个checkbox表示是否已完成，下面有个输入框和添加按钮，输入内容点击添加则列表上会多一个todo。大家可以先不用看下面的代码，自己尝试做一下，这个例子需要用到的几个directive：

表示循环todos列表，在li标签内部就可以写模板语言显示每个todo的内容，如{{toodo.text}} 。

代码如下：

<!DOCTYPE html>
<html ng-app="todoApp">
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      .done-true {
        text-decoration: line-through;
        color: grey;
      }
    </style>
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="TodoController">
      <span>{{remaining()}} of {{todos.length}} remaining</span>
      [ <a href="" ng-click="archive()">archive</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in todos">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
      </ul>
      <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText" size="30"
            placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
    </div>
  <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script>
  <script>
    angular.module('todoApp', [])
        .controller('TodoController', ['$scope', function($scope) {
          $scope.todos = [
            {text:'learn angular', done:true},
            {text:'build an angular app', done:false}];

          $scope.addTodo = function() {
            $scope.todos.push({text:$scope.todoText, done:false});
            $scope.todoText = '';
          };

          $scope.remaining = function() {
            var count = 0;
            angular.forEach($scope.todos, function(todo) {
              count += todo.done &#63; 0 : 1;
            });
            return count;
          };

          $scope.archive = function() {
            var oldTodos = $scope.todos;
            $scope.todos = [];
            angular.forEach(oldTodos, function(todo) {
              if (!todo.done) $scope.todos.push(todo);
            });
          };
        }]);
  </script>
  </body>
</html>

로그인 후 복사

上面的输入框和按钮其实用下面的代码也能实现

<input type="text" ng-model="todoText" size="30"
            placeholder="add new todo here">
        <input class="btn-primary" type="button" value="add" ng-click="addTodo()">

로그인 후 복사

之所以官方的示例中用了

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

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

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

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

뜨거운 주제

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

7405

자바 튜토리얼

1630

Cakephp 튜토리얼

1358

라라벨 튜토리얼

1268

PHP 튜토리얼

1218

Related knowledge

Python 학습: 시스템에 Pandas 라이브러리를 설치하는 방법 Jan 09, 2024 pm 04:42 PM

빠른 시작: Python에 pandas 라이브러리를 설치하려면 특정 코드 예제가 필요합니다. 1. 개요 Python은 많은 실용적인 라이브러리를 포함하는 강력한 개발 생태계를 갖춘 널리 사용되는 프로그래밍 언어입니다. Pandas는 가장 널리 사용되는 데이터 분석 라이브러리 중 하나이며 효율적인 데이터 구조와 데이터 분석 도구를 제공하여 데이터 처리 및 분석을 더 쉽게 만듭니다. 이 기사에서는 Python에 pandas 라이브러리를 설치하는 방법을 소개하고 해당 코드 예제를 제공합니다. 2. 파이 설치

Mojs 애니메이션 라이브러리 빠른 시작: 폭발 모듈 가이드 Sep 02, 2023 pm 11:49 PM

Mojs를 사용하여 HTML 요소에 애니메이션을 적용하는 방법을 학습하는 것으로 이 시리즈를 시작합니다. 이 두 번째 튜토리얼에서는 Shape 모듈을 계속 사용하여 내장된 SVG 모양에 애니메이션을 적용합니다. 세 번째 튜토리얼에서는 ShapeSwirl 및 Stagger 모듈을 사용하여 SVG 모양에 애니메이션을 적용하는 더 많은 방법을 다룹니다. 이제 버스트 모듈을 사용하여 버스트에서 다양한 SVG 모양에 애니메이션을 적용하는 방법을 알아봅니다. 이 튜토리얼은 처음 세 튜토리얼에서 다룬 개념에 따라 달라집니다. 아직 읽어보지 않으셨다면 먼저 읽어보시길 권합니다. 기본 버스트 애니메이션 만들기 버스트 애니메이션을 만들기 전에 가장 먼저 해야 할 일은 버스트 개체를 인스턴스화하는 것입니다. 그 후에는 다른 속성을 지정할 수 있습니다.

빠른 시작: Go 언어 기능을 사용하여 간단한 오디오 스트리밍 서비스 구현 Jul 29, 2023 pm 11:45 PM

빠른 시작: Go 언어 기능을 사용하여 간단한 오디오 스트리밍 서비스 구현 소개: 오디오 스트리밍 서비스는 오늘날 디지털 세계에서 점점 더 인기를 얻고 있으며, 이를 통해 전체 다운로드를 수행하지 않고도 네트워크를 통해 직접 오디오 파일을 재생할 수 있습니다. 이 글에서는 Go 언어의 기능을 활용하여 간단한 오디오 스트리밍 서비스를 빠르게 구현하는 방법을 소개하여 이 기능을 더 잘 이해하고 사용할 수 있도록 하겠습니다. 1단계: 준비 먼저 Go 언어 개발 환경을 설치해야 합니다. 공식 홈페이지(https://golan)에서 다운로드 가능합니다.

빠른 시작: Go 언어 기능을 사용하여 간단한 이미지 인식 기능 구현 Jul 30, 2023 pm 09:49 PM

빠른 시작: Go 언어 기능을 사용하여 간단한 이미지 인식 기능 구현 오늘날의 기술 발전에서 이미지 인식 기술이 화두가 되었습니다. 빠르고 효율적인 프로그래밍 언어인 Go 언어는 이미지 인식 기능을 구현할 수 있는 능력을 갖추고 있습니다. 이 기사에서는 독자들에게 Go 언어 기능을 사용하여 간단한 이미지 인식 기능을 구현하는 빠른 시작 가이드를 제공합니다. 먼저 Go 언어 개발 환경을 설치해야 합니다. Go 언어 공식 홈페이지(https://golang.org/)에서 해당 버전을 다운로드 받으실 수 있습니다.

빠르게 시작하는 데 도움이 되도록 Go 언어에서 일반적으로 사용되는 5가지 프레임워크를 추천합니다. Feb 24, 2024 pm 05:09 PM

제목: 빠르게 시작하기: 권장되는 5가지 일반적인 Go 언어 프레임워크 최근 몇 년 동안 Go 언어의 인기로 인해 점점 더 많은 개발자가 프로젝트 개발에 Go를 사용하기로 선택했습니다. Go 언어는 효율성, 단순성 및 뛰어난 성능으로 인해 광범위한 주목을 받아왔습니다. Go 언어 개발에서 적합한 프레임워크를 선택하면 개발 효율성과 코드 품질을 향상시킬 수 있습니다. 이 기사에서는 Go 언어에서 일반적으로 사용되는 5가지 프레임워크를 소개하고 독자가 빠르게 시작할 수 있도록 코드 예제를 첨부합니다. Gin 프레임워크 Gin은 빠르고 효율적인 경량 웹 프레임워크입니다.

5가지 Kafka 시각화 도구를 사용하여 빠른 시작 알아보기 Jan 31, 2024 pm 04:32 PM

빠른 시작: 다섯 가지 Kafka 시각화 도구 사용 가이드 1. Kafka 모니터링 도구: 소개 Apache Kafka는 대량의 데이터를 처리하고 높은 처리량과 짧은 대기 시간을 제공할 수 있는 분산 게시-구독 메시징 시스템입니다. Kafka의 복잡성으로 인해 Kafka 클러스터를 모니터링하고 관리하는 데 도움이 되는 시각화 도구가 필요합니다. 2.Kafka 시각화 도구: 다섯 가지 주요 선택 KafkaManager: KafkaManager는 오픈 소스 웹 커뮤니티입니다.

입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼 Jun 15, 2017 pm 05:50 PM

자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.

빠른 시작: Go 언어 기능을 사용하여 간단한 데이터 시각화 선 차트 표시 구현 Jul 30, 2023 pm 04:01 PM

빠른 시작: Go 언어 기능을 사용하여 간단한 데이터 시각화 선 차트 표시 구현 소개: 데이터 분석 및 시각화 분야에서 선 차트는 시간이나 기타 변수에 따른 데이터 변화 추세를 명확하게 표시할 수 있는 일반적으로 사용되는 차트 유형입니다. 이 기사에서는 Go 언어 기능을 사용하여 간단한 데이터 시각화 선 차트 표시를 구현하는 방법을 소개하고 관련 코드 예제를 제공합니다. 1. 준비 작업을 시작하기 전에 다음 조건을 확인해야 합니다. Go 언어 환경을 설치하고 관련 환경 변수를 설정합니다. 필요한 종속성 설치

See all articles

AngularJS_AngularJS로 빠른 시작

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제