`
jinhonglin001
  • 浏览: 15115 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Angular js 的学习(一)

 
阅读更多

     初涉Angular js,还有许多不懂的地方,初步将自己学到的东西记录下来,便于日后的学习。

一、Angular js简介

    AngularJs是一个JavaScript框架。他是一个以JavaScript编写的库,通过指令扩展HTML,通过表达式绑定数据到HTML。

二、AngularJs指令

    AngularJs通过指令这一属性来扩展HTML,带有前缀ng-

    ng-app 用来初始化一个AngularJs应用程序。

    ng-init 用来初始化应用程序数据。

    ng-model 用来把元素值绑定到应用程序中。

 下面是一个应用AngularJs的实例:

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
 	<p>在输入框中尝试输入:</p>
 	<p>姓名:<input type="text" ng-model="name"></p>
 	<p ng-bind="name"></p>
</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

</body>
</html>

 上面的效果如下(截了下屏,怕不清楚把边框瞄了下):
 
三、AngularJs表达式

     AngularJs表达式写在双括号内{{     }}。

     AngularJs表达式把数据绑定到HTML上,与ng-bind差不多

     AngularJs表达式将在表达式书写的位置“输出”数据。

     AngularJs表达式可以包含文字,运算符和变量。

例:

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
 	<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

</body>
</html>

 运行结果如下:

四、AngularJs控制器

     AngularJs控制器控制AngularJs应用程序的数据。

     AngularJs控制器同时也是JavaScript对象

     使用指令ng-controller定义AngularJs控制器

例:

<div ng-app="myApp" ng-controller="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>

 

效果如下:

 

 今天的大概就先来了解一下AngularJs,还有许多许多不理解的地方,例如控制器的写法为什么里面要写$scope 写别的不可以吗??

 

 

分享到:
评论

相关推荐

    Angular js学习视频教程

    这个"Angular JS学习视频教程"显然是为了帮助开发者深入理解和掌握这个强大的框架。 首先,AngularJS的核心特性包括双向数据绑定,这意味着视图和模型之间的数据变化会实时反映在对方上,减少了手动同步数据的繁琐...

    angular学习资料2

    Angular是前端开发领域中的一个强大的JavaScript框架,由Google维护,被广泛用于构建单页应用程序(SPA)。这个"angular学习资料2"的压缩包文件显然包含了多个Angular相关的示例项目,对于初学者或想要深入理解...

    angular2学习文档的汇总

    Angular 2,作为一款强大的前端开发框架,是Google推出的新一代JavaScript框架,旨在提供更高效、更灵活的Web应用开发体验。在这个名为“angular2学习文档的汇总”的压缩包中,包含了两个重要的学习资源——...

    angular js学习分享

    angular 对于初学者来说,无疑会带来极大的帮助,帮你搭建合理前端MVC框架,并指导你迅速学习JavaScript进行服务器端的编码和调试。极大提高学习效率,缩短时间成本。

    Laravel和 Angular JS开发全栈知乎

    Angular JS是由Google推出的一款用于构建动态Web应用的JavaScript框架。它通过扩展HTML标签的功能来简化应用的开发,并通过双向数据绑定等特性提高了开发效率。 - **特点**: - **双向数据绑定**:Angular JS通过...

    Angular js教程三

    Angular JS是Google维护的一个开源项目,它基于JavaScript,同时也充分利用了ECMAScript的特性,为开发者提供了丰富的功能和便利。 1. **双向数据绑定**:Angular JS的核心特性之一就是双向数据绑定,它将视图与...

    angular学习资料

    Angular是一款由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。它是一个强大的、全面的解决方案,提供了丰富的特性和工具来开发复杂、高性能的Web应用程序。本学习资料旨在帮助你深入理解Angular的...

    angular.js-master.zip

    AngularJS 是一个强大的前端JavaScript框架,由Google维护,...如果你想要深入学习或使用AngularJS,这个"angular.js-master.zip"是一个很好的起点,可以直接查看源码理解其工作原理,并结合官方文档和示例来快速上手。

    Angular.js v1.8.3.zip

    Angular.js 是一个强大的JavaScript框架,由Google维护,用于构建单页应用(Single Page Applications, SPA)。这个版本,v1.8.3,是Angular.js的一个稳定版本,它提供了丰富的功能和改进,帮助开发者构建高性能、可...

    example for angular js

    Angular JS 是一个流行的前端 JavaScript 框架,用于构建动态 Web 应用程序。本文将通过一个实际的项目示例——TodoList 应用,来详细介绍 Angular JS 的核心概念与特性,包括布局设计、控制器使用、数据绑定等技术...

    angular.js资料

    Angular.js是一个非常流行的开源JavaScript框架,主要用于开发动态网页。对于有一定HTML和JavaScript基础的人来说,它是一个理想的选择,因为它能够帮助开发者组织JavaScript代码,创建响应式网站,并且与jQuery等...

    ssm+springsecurity+angular.js前后分离小练习

    Angular.js是Google维护的一个前端JavaScript框架,用于构建单页应用(SPA)。它提供了数据绑定、指令、服务、过滤器等功能,极大地提高了开发效率。在这个项目中,Angular.js可能被用来处理前端的数据展示、用户...

    Angular学习教程手把手教你学会Angular2源码见于本demo项目

    这个"Angular学习教程手把手教你学会Angular2源码见于本demo项目"的资源,显然是一个指导初学者逐步掌握Angular2(现在被称为Angular4或更高版本)的实践教程。在这里,我们将深入探讨Angular的核心概念和关键特性。...

    Angular6 学习资料 路由 源码

    Angular6.r68.2018最新版随书源代码, 学习angular最佳资源。代码已手动修改为angular6版本,供学习参考。使用方法:解压后进入项目目录,执行npm install,nmp start即可使用,需要angular-cli@6.0.x,typescript@...

    ssm+angular js+shiro 做的后台管理系统

    Angular JS是Google维护的一个JavaScript框架,主要用于构建单页应用程序(SPA)。它提供了数据双向绑定、指令系统、模块化等功能,使得前端页面的动态性和交互性大大增强。在这个后台管理系统中,Angular JS很可能是...

    angular学习笔记

    根据提供的文件信息,我们可以整理出一系列与Angular相关的知识点。这些知识点涵盖了从基本的Angular特性到更高级的主题,如异步请求处理、依赖注入、路由管理等。下面是详细的知识点总结: ### Angular学习笔记 #...

    Angular从零到一PDF

    Angular 是一个由 Google 维护的开源 JavaScript 框架,用于构建单页应用程序(SPA)。它提供了丰富的功能和工具,使得开发人员能够高效地构建复杂的、动态的 web 应用程序。Angular 基于 MVC(Model-View-...

    angular2 最新教程(全网首发)

    Angular是谷歌公司开发的一款开源前端框架,全名为Angular2,是AngularJS的后继产品。它用于创建动态网页和单页应用程序(SPA)。Angular2在2011年首次推出,经过多年的迭代发展,已经成为前端开发领域内一个非常...

    angular官网教程学习

    Angular是一款由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。这个“angular官网教程学习”项目看起来是一个为了帮助初学者理解Angular基础知识而创建的简单示例。在这个压缩包中,包含了一些关键...

Global site tag (gtag.js) - Google Analytics