zoukankan      html  css  js  c++  java
  • angular入门(基础篇)

    一、什么是AngularJs?

    AngularJs是一个JavaScript框架,通过指令扩展了HTML,并且通过表达式绑定数据到HTML.

    AngularJs使得开发现代的单页面应用程序(SPA:Single Page Applications)变得更加简单,并且其避免了js中的DOM操作,使得加载速度大大加快。

    二、Angular入手模板框架搭建

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

    AngularJS 模块(Module) 定义了 AngularJS 应用。

    AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

    ng-app指令定义了应用,也就是angular指令有效的作用域, ng-controller 定义了控制器,一个作用域内可以定义多个控制器。

    三、Angular常用指令及用法

    ng-app 指令初始化一个 AngularJS 应用程序。

    ng-init 指令初始化应用程序数据:

    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
    
    </div>
    

      

    ng-model 指令把元素值(比如输入域的值)绑定到应用程序,{{ name }} 是通过 ng-model="name" 进行同步。

    <input type="number"    ng-model="quantity">
    <p>{{quantity}}</p>
    

      

    ng-repeat 指令会重复一个 HTML 元素:

    <li ng-repeat="x in names">
          {{ x }}
    </li>
    

      

      .directive 函数来添加自定义的指令:

    注:使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive,返回的参数 ——template:html代码。

    <body ng-app="myApp">
    
    <runoob-directive></runoob-directive>
    
    <script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
        return {
            template : "<h1>自定义指令!</h1>"
        };
    });
    </script>
    

     

  • 相关阅读:
    20162320刘先润大二 实验三 查找与排序
    20162320刘先润大二第9周学习总结
    20162320大二第8周学习总结
    20162320刘先润大二 实验二
    20162321王彪 2016-2017-2《程序设计与数据结构》课程总结
    实验五 数据结构综合应用
    20162321-王彪-实验四总结
    王彪-20162321《程序设计与数据结构2nd》-第十一周学习总结与实验报告
    王彪-20162321-Java程序设计与数据结构2nd-第十周学习总结
    实验三-总结博客
  • 原文地址:https://www.cnblogs.com/yang-shun/p/7002360.html
Copyright © 2011-2022 走看看