博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJs 学习
阅读量:5010 次
发布时间:2019-06-12

本文共 1726 字,大约阅读时间需要 5 分钟。

理解:
要理解AngularJS,第一件要做得事情就是要明白这是一个根本上就和jQuery不一样的工具。jQuery是一个库而AngularJS是一个框架。使用库是指,你的代码决定什么时候从库中调用一个特定的方法;使用框架则是,你实现了一些回调方法,到了特定的时候框架会去调用这些方法
 
1.ng-app 指令定义一个 AngularJS 应用程序。
<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {
{name}}</h1>
</div>
 > hello  + 输进去的内容 
  告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
 
 
2.ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 数据模型
   把输入域的值绑定到应用程序变量 name。
model(模型、模特)  和 
 
module (模块) 区分 看 2和9
 
 
 
3.ng-bind 指令把应用程序数据绑定到 HTML 视图。
   把应用程序变量 name 绑定到某个段落的 innerHTML。
 
 
 
4.ng-init 指令初始化 AngularJS 应用程序变量
<div data-ng-app="" data-ng-init="firstName='John'">

       <p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

  <1>.但是您可以使用 data-ng- 来让网页对 HTML5 有效。
  <2>.初始化的值就是 john
 
 
 
5.{
{ 表格式 }} 
  <p>我的第一个表达式: {
{ 5 + 5 }}</p>
 >我的第一个表达式: 10
 
 
 
6.angular 应用
<div ng-app="myApp" ng-c>myCtrl">
      名: <input type="text" ng-model="firstName"><br>
      姓: <input type="text" ng-model="lastName"><br>
      <br>
      姓名: {
{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
           $scope.firstName= "John";
           $scope.lastName= "Doe";
});
</script>
 
  <1>. angular.module('myApp', []); 模块定义应用
       对应上面的  ng-app="myApp" 
  <2>. app.controller('myCtrl', function()); 控制器控制应用
       对应上面的  ng-c>myCtrl"
 
 
7.ng-repeat 指令会重复一个 HTML 元素:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
       <p>使用 ng-repeat 来循环数组</p>
      <ul>
             <li ng-repeat="x in names">
              {
{ x }}
            </li>
      </ul>
<div>
 
 
 
8.ng-show 属性返回 
true 的情况下显示。
 
 
9.  var app = angular.module("myApp", []);
[]表示 依赖的 模块!!
 
 
 
10.directive 指令 可以让代替html代码
var appModule = angular.module('app', []);
appModule.directive('hello', function() {  
       return {  
          restrict: 'E',  
          template: '<div>Hi there</div>',  
          replace: true  
       };
});

转载于:https://www.cnblogs.com/zycbloger/p/6187529.html

你可能感兴趣的文章
The Ctrl & CapsLock `problem'
查看>>
MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作
查看>>
linux故障判断
查看>>
Leetcode 23. Merge k Sorted Lists(python)
查看>>
Java进阶知识点6:并发容器背后的设计理念 - 锁分段、写时复制和弱一致性
查看>>
Shell编程之批量安装服务脚本实例
查看>>
tomcat 报错处理
查看>>
使用iframe给页面的localStorage扩容
查看>>
第四次作业
查看>>
Java 内存映射文件
查看>>
衡量软件性能三大常用指标及其相互关系
查看>>
#网页中动态嵌入PDF文件/在线预览PDF内容#
查看>>
Django基础八之cookie和session
查看>>
测试样式
查看>>
Django------The template 模版高级进阶1 2012.08.30
查看>>
Makefile ===> Makefile 快速学习
查看>>
face detection[HR]
查看>>
java性能调优工具
查看>>
C# 其他的Url 文件的路径转化为二进制流
查看>>
cmake使用
查看>>