`
forever1121
  • 浏览: 16164 次
  • 性别: Icon_minigender_2
  • 来自: 齐齐哈尔
社区版块
存档分类
最新评论

AngularJS_1

阅读更多
木有学习RESTful,实际上是看了2个小时之后发现什么都没看懂,突然意识到可能不是一个层次上的,所以就暂时把它搁浅了,转战AngularJS。

<!doctype html>
<html  ng-app>
<head>
  <meta charset="UTF-8">
  <title>Hello AngularJS</title>
  <script src="e:\angular.min.js"></script>
</head>
<body>
   <div>
<input  type="text" ng-model="yourname"  placeholder="Enter a name here" />
<h1>Hello, {{ yourname }} !</h1> 
   </div>
</body>
</html>

这是AngularJS的一个小例子,不过还是觉得好神奇,好高大上。算了,不扯这个没用的了,这个例子我也是遇到了点问题。最万恶的问题是路径问题。这个估计我是弄不明白了,引用路径的时候一定要用“\”,而不是“/”。还有,是angular.min.js而不是angularjs.min.js。其次就是html那里忘记打ng-app,忘了指定它是angularjs了。

AngularJS通过ng-directives扩展了HTML,并以ng作为前缀的HTML属性。(HTML5允许以data扩展属性,所以使用data-ng-)
AngularJS表达式卸载双大括号内:{{expression}}
ng-app指令定义一个AngularJS应用程序。
ng-init指令初始化应用程序数据
ng-model指令把元素值绑定到应用中。
ng-bind指令把应用程序数据绑定到HTML视图。
ng-repeat重复一个HTML

<!doctype html>
<html  ng-app>
<head>
  <meta charset="UTF-8">
  <title>ng-repeat  数组</title>
  <script src="e:\angular.min.js"></script>
</head>
<body>
   <div ng-app=""  ng-init="names=[{name:'John',sex:'M'},{name:'Rose',sex:'F'},{name:'Lucy',sex:'F'}]">
        <p>循环对象</p>
        <ul>
            <li  ng-repeat="x in names" >
                {{x.name+", "+x.sex}}
            </li>
        </ul>
   </div>
</body>
</html>

ng-controller指令定义了应用程序控制器 控制器是js对象,由js对象的构造函数创建。控制器的$scope是控制器所指向的应用程序/HTML元素。

<div ng-app="" ng-controller="personController">

名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.fullName()}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe",
        fullName: function() {
            var x;
            x = $scope.person;
            return x.firstName + " " + x.lastName;
        }
    };
}
</script>

AngularJS过滤器用于转换数据。
currency    格式化数字为货币格式
filter      从数组项中选择一个子集。输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型。
lowercase   格式化字符串为小写
orderBy     根据某个表达式排列数组
uppercase   格式化字符串为大写

<div ng-app="" ng-controller="namesController">
<p>输入过滤:</p>
<p><input type="text" ng-model="name"></p>
<ul>
  <li ng-repeat="x in names | filter:name | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>

ng-disabled指令直接绑定应用程序数序到HTML的disabled属性。
<div ng-app="">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>
</div>

ng-show显示或隐藏一个HTML元素。  true  false
ng-click指令定义了一个AngularJS单击事件
控制器污染了全局命名空间,因此,将所有的控制器可以放置一个模块中,保持全局命名空间的整洁。
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
分享到:
评论

相关推荐

    angularjs_pingan-master

    1. **index.html** - 项目的入口文件,包含了HTML结构以及引用的外部资源,如CSS、JavaScript文件。在这个项目中,index.html应该包含了AngularJS的ng-app指令,用于定义应用的根范围,并可能包含了RequireJS的配置...

    AngularJS_1..5.0_Demo

    AngularJS + Bootstrap Demo项目,获取豆瓣电影数据

    angularjs_angularjs_

    AngularJS,作为一款由Google维护的前端JavaScript框架,被广泛应用于构建动态Web应用程序。它以其数据绑定、依赖注入和模块化等特性深受开发者喜爱。在本文中,我们将深入探讨AngularJS 1.6版本,从环境搭建到核心...

    angularjs_requirejs demo

    1. **配置RequireJS**:首先,需要配置RequireJS的配置文件(通常是`main.js`),在这里指定AngularJS和其他依赖库的路径,以及应用程序的入口点。 2. **定义模块**:然后,使用RequireJS的define方法定义AngularJS...

    AngularJS_Up_and_Running

    AngularJS是Google开发的一个开源前端JavaScript框架,它是用于构建动态网页应用的利器。AngularJS的核心概念基于声明式编程和MVC(Model-View-Controller,模型-视图-控制器)设计模式,允许开发者利用HTML作为模板...

    AngularJS_AUI库

    AngularJS_AUI库是一款专为AngularJS框架设计的自定义用户界面库,旨在提供一系列丰富的组件和工具,帮助开发者构建功能强大的Web应用。这个库的出现是为了满足开发人员在使用AngularJS进行前端开发时对美观、高效且...

    angularJS_学习资料

    1. **指令(Directives)**: AngularJS 的指令是用于扩展HTML的自定义元素、属性或类,如`ng-repeat`用于循环渲染数据,`ng-if`用于条件渲染,`ng-click`处理用户交互。 2. **数据绑定(Data Binding)**: 数据绑定...

    API.zip_API_AngularJS Bootstrap_angularjs_bootstrap api

    Ajax,AngularJS,Bootstrap,css2,css4,DHTML,DOM,DTD,EasyUI,Ext2.2,Html5,html,JavaEE,JSP,lINUX,MySQL,Servelt,Spring,Struts2,W3C,XML,

    Angularjs_in_action

    - **第1章**:“Hello AngularJS”:本章通过一个简单的示例向读者展示了如何创建一个基本的AngularJS应用。这不仅有助于初学者快速上手,还能帮助理解AngularJS的基本工作原理。 - **第2章**:本章重点介绍...

    AngularJS_2 权威教程

    它引入了许多与原版AngularJS 1.x不同的改进,旨在提高开发效率、性能和可维护性。本教程将深入探讨AngularJS 2的核心概念和技术。 **一、核心概念** 1. **组件化**:AngularJS 2采用组件化开发模式,将应用拆分为...

    AngularJS例子_angularjs_

    AngularJS:是一个JS结构化框架,主机不再是DOM,而是页面中动态的数据。1、双向数据绑定。2、声明式依赖注入。3、解耦应用逻辑,数据模型和视图。4、完善的页面指令。5、定制表单验证。6、Ajax封装。用途:构建单...

    AngularJS_in_Depth_v5_MEAP

    **第1章:AngularJS概览** - AngularJS的历史背景与发展现状 - AngularJS的核心特性与优势 - 基础概念:模块、控制器、指令、服务、过滤器等 - AngularJS的工作原理简介 - AngularJS与其他前端框架的对比 **第2章...

    AngularJS权威指南_angularjs_

    1. **数据绑定** 数据绑定是AngularJS的核心特性,它允许开发者在视图(View)和模型(Model)之间建立动态连接,实现双向数据同步。这种设计大大简化了DOM操作,使得UI与数据之间的交互变得直观而高效。通过`{{ }}...

    AngularJS 中文API参考手册.zip_API_angularjs_angularjs api

    **AngularJS 中文API参考手册** AngularJS 是一个强大的JavaScript框架,主要用于构建单页应用程序(Single Page Applications, SPA)。这个框架由Google维护,它通过数据绑定和依赖注入等特性简化了前端开发工作。...

    spring-boot-project.zip_angularjs_largefkb_spring_spring-boot_sp

    标题中的"spring-boot-project.zip_angularjs_largefkb_spring_spring-boot_sp"暗示这是一个包含Spring Boot、AngularJS以及可能的大型数据库应用的项目。描述简单地提到了"spring-boot,mybatis,angularjs",这意味...

    AngularJS中文教程.rar_angularjs_angularjs教程

    1. **双向数据绑定**:AngularJS的核心特性之一,它将模型(Model)与视图(View)紧密连接起来,当模型改变时,视图会自动更新,反之亦然。这使得开发者无需手动操作DOM来同步数据。 2. **指令**:AngularJS扩展...

    AngularJS-SPA-Template-master.zip_Angularjs-master_angularjs_asp

    1. AngularJS源代码:包括JS文件、CSS样式表和HTML模板。 2. ASP.NET MVC控制器和模型:处理CRUD操作的C#代码。 3. 数据库配置:可能有数据库连接字符串和模型定义。 4. 视图(Views):ASP.NET MVC的HTML模板,与...

    angularjs_angular_

    1. **基础概念**:首先会介绍AngularJS的基本结构和核心概念,如模块(modules)、控制器(controllers)、服务(services)、指令(directives)和表达式(expressions)。这些组件协同工作,构建出可复用、可维护...

    AngularJS参考手册 中文CHM版.rar_angularjs_angularjs中文_js

    JS参考手册,可以通过它查阅许多函数。。。。。。。

    问答页面例子-angularjs.rar_angularjs_问答

    1. **模块化**:AngularJS应用始于模块,通过`ng-app`指令声明。在问答页面中,可能有一个名为`questionApp`的模块,用以组织所有相关组件和服务。 2. **数据绑定**:AngularJS的核心特性之一是双向数据绑定,使得...

Global site tag (gtag.js) - Google Analytics