AngularJS前端js框架
本篇文章和大家介绍了关于AngularJS前端js框架，有需要的朋友可以看一下
使用:
<script type="application/javascript" src="../js/angular.min.js "></script>
一、常用属性:
ng-app：可以再任何元素上使用,代表angular应用作用域,也是AngularJS的程序入口,对标签内的元素初始化.
ng-controller：控制器.
ng-model：指定当前元素与数据模型($scope)中的属性绑定,如果数据模型中没有此属性,会自定创建
ng-repeat：循环$scope中的属性.
ng-bind或{{属性名}}：进行属性取值.
二、双向绑定:
定义:更新视图会自动跟新模型,更新模型会自动更新视图.
<!-- Angular编程入口 -->
<body ng-app>
<p>
<!-- 模型 -->
<input type="text" name="name" ng-model="name " />
</p>
<p>
Hello,{{name}}!!!
</p>
</body>三、AngularJS基于模块化实现MVC:
<body>
<!-- Angular编程入口,定义一个模块 -->
<p ng-app="myapp" ng-controller="myctrl">
<p>
<!-- 模型 -->
<input type="text" name="name" ng-model="name " />
</p>
<p>
Hello,{{name}}!!!
</p>
</p>
</body>
<script type="text/javascript">
//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
var myapp = angular.module("myapp",[]);
//定义模块的控制器
/*myapp.controller("myctrl",["$scope",function($scope){
$scope.name="沃德发";
}])*/
//$scope页面与控制器的桥梁
myapp.controller("myctrl",function($scope){
$scope.name="法克鱿";
});
</script>四、AngularJS的事件绑定:
ng-click：AngularJS的单击事件.
<body>
<!-- Angular编程入口,定义一个模块 -->
<p ng-app="myapp" ng-controller="myctrl">
<p>
<!-- 模型 -->
<input type="text" name="name" ng-model="name " />
<input type="button" value="清空" ng-click="clearVal()"/>
</p>
<p>
Hello,{{name}}!!!
</p>
</p>
</body>
<script type="text/javascript">
//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
var myapp = angular.module("myapp",[]);
//$scope页面与控制器的桥梁
myapp.controller("myctrl",function($scope){
$scope.name="嗯嗯啊";
//事件绑定
$scope.clearVal = function() {
$scope.name = "";
}
});
</script>五、AngularJS的遍历集合:
ng-repeat：AngularJS用于集合遍历，迭代.
<body>
<!-- Angular编程入口,定义一个模块 -->
<p ng-app="myapp" ng-controller="myctrl">
<table border="1" width="90%">
<tr>
<td>序号</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品价格</td>
</tr>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</p>
</body>
<script type="text/javascript">
//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
var myapp = angular.module("myapp",[]);
myapp.controller("myctrl",function($scope){
$scope.products=[
{
id:'A001',
name:'狗子',
price:3306
},{
id:'A002',
name:'啥子哟',
price:8080
}
]
});
</script>六、AngularJS的路由:
引入路由的js:
<script type="text/javascript" src="../js/angular-route.min.js" ></script>
ng-view：显示路由调用的页面
$routeProvider：路由系统
when..when..otherwise : 类似于switch..case..case..default
<!-- Angular编程入口 -->
<body ng-app="myapp">
<p>
<h1>HEAD</h1>
<a href="#/aa">首页</a>
<a href="#/bb">*</a>
<a href="#/cc">站长推荐</a>
</p>
<!-- ng-view显示路由调用页面 -->
<p ng-view>
</p>
<p>
<h1>FOOT</h1>
</p>
</body>
<script type="text/javascript">
var myapp = angular.module("myapp",["ngRoute"]);
myapp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/aa",{
templateUrl:'aa.html'
}).when("/bb",{
templateUrl:'bb.html'
}).when("/cc",{
templateUrl:'5_3.html'
}).otherwise({
redirectTo:"/"
});
}]);
</script>相关推荐：
以上是AngularJS前端js框架的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
PHP与Vue：完美搭档的前端开发利器
Mar 16, 2024 pm 12:09 PM
PHP与Vue：完美搭档的前端开发利器在当今互联网高速发展的时代，前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高，前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术，搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合，以及详细的代码示例，帮助读者更好地理解和应用这两
前端面试官常问的问题
Mar 19, 2024 pm 02:24 PM
在前端开发面试中，常见问题涵盖广泛，包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此，应试者应充分准备这些方面，以展现自己的能力和专业知识。
JavaScript和WebSocket：打造高效的实时天气预报系统
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
Django是前端还是后端？一探究竟！
Jan 19, 2024 am 08:37 AM
Django是一个Python编写的web应用框架，它强调快速开发和干净方法。尽管Django是一个web框架，但是要回答Django是前端还是后端这个问题，需要深入理解前后端的概念。前端是指用户直接和交互的界面，后端是指服务器端的程序，他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下，前后端程序可以独立开发，分别实现业务逻辑和交互效果，数据的交
Go语言前端技术探秘：前端开发新视野
Mar 28, 2024 pm 01:06 PM
Go语言作为一种快速、高效的编程语言，在后端开发领域广受欢迎。然而，很少有人将Go语言与前端开发联系起来。事实上，使用Go语言进行前端开发不仅可以提高效率，还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性，并提供具体的代码示例，帮助读者更好地了解这一领域。在传统的前端开发中，通常会使用JavaScript、HTML和CSS来构建用户界面
Django：前端和后端开发都能搞定的神奇框架！
Jan 19, 2024 am 08:52 AM
Django：前端和后端开发都能搞定的神奇框架！Django是一个高效、可扩展的Web应用程序框架。它能够支持多种Web开发模式，包括MVC和MTV，可以轻松地开发出高质量的Web应用程序。Django不仅支持后端开发，还能够快速构建出前端的界面，通过模板语言，实现灵活的视图展示。Django把前端开发和后端开发融合成了一种无缝的整合，让开发人员不必专门学习
