AngularJS入门案例

最新推荐文章于 2020-02-22 10:10:09 发布
最新推荐文章于 2020-02-22 10:10:09 发布
阅读量166 收藏 1
点赞数
分类专栏： angularjs 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41260512/article/details/78895574
版权

AngularJS入门案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>AngularJSDemo01--表达式</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
    </head>
    <!--
        第一步：表达式指令 ng-app ng-model {{}}
    -->
    <body ng-app>
        姓名：<input ng-model="myName"/><br />
        您输入的姓名：{{myName}}
    </body>
</html>

----------------------------------------------------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJSDemo02---双向绑定</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
    </head>
    <!--
        双向数据绑定
    -->
    <body ng-app>
        姓名：<input ng-model="myName" /><br />
        欢迎：<input value="{{myName}}"/>先生/女士
    </body>
</html>

------------------------------------------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJSDemo03---初始化指令</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
    </head>
    <!--
        初始化数据值
    -->
    <body ng-app ng-init="myName='张振华'">
        姓名：{{myName}}
    </body>
</html>

-------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJSDemo04---控制器</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script>
            /*
             * 第一步：自定义模版
             * 第二步：自定义控制器
             * 第三步：自定义方法
             * */
            //自定义模版
            var app=angular.module("myApp",[]);
            //自定义控制器
            app.controller("myController",function($scope){
                //自定义加法
                $scope.add=function(){
                    return parseInt($scope.x)+parseInt($scope.y);
                }

            })
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        x:<input ng-model="x" /><br />
        y:<input ng-model="y" /><br />
        两个参数之和为：{{add()}}
    </body>
</html>

-----------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJSDemo05---事件指令</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myController",function($scope){
                $scope.add=function(){
                    return $scope.z=parseInt($scope.x)+parseInt($scope.y);
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        x:<input ng-model="x" /><br />
        y:<input ng-model="y" /><br />
        <button ng-click="add()">加法运算</button>
        结果为：{{z}}
    </body>
</html>

---------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJSDemo06---循环数组</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myController",function($scope){
                $scope.list=[100,199,200,198];//定义一个数组
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <table border="1" cellpadding="10" cellspacing="0">
            <tr ng-repeat="x in list">
                <td>{{x}}</td>
            </tr>
        </table>
    </body>
</html>

---------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJSDemo07---循环内置对象</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myController",function($scope){
                $scope.list=[
                    {name:'张三',shuxue:100,yuwen:90},
                    {name:'李四',shuxue:100,yuwen:90},
                    {name:'王五',shuxue:100,yuwen:90}
                ];
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <table border="1" cellpadding="10" cellspacing="0">
            <tr>
                <th>姓名</th>
                <th>数学成绩</th>
                <th>语文成绩</th>
            </tr>
            <tr ng-repeat="x in list" align="center">
                <td>{{x.name}}</td>
                <td>{{x.shuxue}}</td>
                <td>{{x.yuwen}}</td>
            </tr>
        </table>
    </body>
</html>

--------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJSDemo08---内置服务</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myController",function($scope,$http){
                $scope.findAll=function(){
                    //请求路径
                    $http.get('data.json').success(
                        function(response) {
                            $scope.list=response;
                        }
                    );
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
        <table border="1" cellspacing="0" cellpadding="10">
            <tr>
                <th>姓名</th>
                <th>数学成绩</th>
                <th>语文成绩</th>
            </tr>
            <tr ng-repeat="s in list" align="center">
                <td>{{s.name}}</td>
                <td>{{s.shuxue}}</td>
                <td>{{s.yuwen}}</td>
            </tr>
        </table>
    </body>
</html>
余生皆度假
关注
专栏目录
AngularJS入门教程（二）：AngularJS模板
10-25
对于初学者来说，这个案例提供了学习AngularJS入门知识的实践机会，并且能够帮助理解AngularJS如何实现前后端的分离以及数据与视图的实时同步。通过掌握这些核心概念，开发者可以更加得心应手地使用AngularJS进行...
AngularJs入门学习实例
05-30
**AngularJS 入门学习实例** AngularJS 是一个强大的前端JavaScript框架，由Google维护，用于构建动态Web应用。它通过MVC（Model-View-Controller）架构模式简化了开发过程，提供数据绑定、依赖注入、模块化等功能...
AngularJS入门级小案例
崔振凯的博客
10-25 264
一个简单的AngularJS入门小案例 知识点:双向数据绑定 控制器作用 &lt;!DOCTYPE html&gt; &lt;html lang="en" ng-app="HelloApp"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" cont
angularjs入门案例 新玩具-中午吃神马
LuckySummer*
08-03 724
angularjs 是一个用来开发单页webAPP的mvv框架，由Google 开发，如果不知道angularjs 的可以先google 下   按照angularjs 的开发一般顺序先搭建好需要做的视图，然后准备数据，最后绑定事件处理业务逻辑，操作DOM事件用户和程序的交互。   1、开始搭建界面，使用bootstrap作为UI框架，可以快速搭建清爽的界面效果，顺便引入 angular.
AngularJS入门
VNOpU2015的专栏
03-14 235
一、AngularJS简介 　　AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。 　　 二、AngularJS四大特征 2.1MVC 模式 　　Angular遵循...
AngularJS入门小实例
nbme的博客
08-17 231
Your name: hello,{{test || ''}} ng-app告诉AngularJS处理整个HTML页并引导应用，一个页面最好出现一次 双大括号标记{{}}的内容是问候语中绑定的表达式 文本输入指令绑定到一个叫test的模型变量。双大括号标记将test模型变量添加到问候语文本。你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！
AngularJS服务入门案例简介
xyphf的博客
11-11 565
angularJS服务内容简介
AngularJS1入门
weixin_43912805的博客
02-22 945
文章目录AngularJS1入门1. 简介2. Angular四大特征1. MVC模式2. 双向绑定3. 依赖注入4. 模块化设计3. 入门案例表达式双向绑定初始化指令控制器事件指令循环数组循环对象数组内置服务 AngularJS1下载链接（百度网盘） 链接：https://pan.baidu.com/s/199_vzDBSjpeIkUMEqETU7Q 提取码：vmri 复制这段内容后打开百...
通过angularJS官方案例快速入门
weixin_34004576的博客
11-18 75
官方案例-angular-phonecat angularJS官方提供了一个官方案例给大家进行循序渐进的学习,但是如果之前没有接触过node.js以及git的同学这个案例拿着也无从下手…这里就介绍一下怎么打开这个案例吧准备工作:1.Git 2.nodejs 3.npm 4.bower 5.http-server 如果需要成功的一步一步的学习这个案例至少需要安装上面的5个东西，当然2-5都是...
《AngularJS入门与进阶》图书简介
Coding...
02-14 4581
一、图书封面二、图书CIP信息图书在版编目（ＣＩＰ）数据AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ①A… Ⅱ. ①江… Ⅲ. ①超文本标记语言－程序设计 Ⅳ. ①TP312.8 中国版本图书馆CIP数据核字(2017)第004868号三、书籍目录第一部分：入门篇 4 第1章 走进Angu
AngularJS入门demo
dianchi2592的博客
11-08 83
一.AngularJS简介 　　AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中 二.四大特性 　1.mvc设计模式 　　　 　 　　Model:数据,其实就是angular变量($scope.XX); 　　View: 数据的呈现,Html+Directive(指...
AngularJS 入门教程之事件处理器详解
11-22
在这个"AngularJS 入门教程之事件处理器详解"中，我们将探讨如何使用AngularJS的ngClick指令来处理用户点击事件，从而更新应用程序的状态。 首先，我们要关注的是`PhoneDetailCtrl`控制器。在控制器中，我们定义了...
AngularJS入门教程之表单校验用法示例
10-21
AngularJS入门教程之表单校验用法示例则是专门讲解如何在AngularJS中使用表单校验，以提高用户体验和数据的有效性。本篇文章将会详细解析表单校验的各个方面，包括校验的必要性、AngularJS提供的校验指令、以及如何...
AngularJS书两本
11-24
总的来说，这两本书全面覆盖了AngularJS从入门到进阶的各个层面，无论是初学者还是有经验的开发者，都能从中受益。通过深入学习和实践，开发者可以提升构建复杂Web应用的能力，为自己的职业生涯添加重要的技能。
5153-微信小程序个人日程安排微信小程序的实现+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
旅行智能推荐系统.zip
09-15
本项目旨在开发一个智能旅行推荐系统。该系统利用Yelp数据集，采用混合的内容推荐和协同过滤方法为用户提供个性化的旅行建议。通过整合React前端和fla后sk端技术，系统提供了一个无缝的用户体验，能够分析用户偏好和行为，并根据这些信息进行定制化的推荐。此外，该系统具有适应性，随着用户交互的持续进行，能够不断完善推荐结果。整体而言，这是一个结合了先进推荐算法和现代化Web技术的先进项目，旨在为用户提供更加智能和个性化的旅行建议。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
自己整理的Ansible 自动化运维实战笔记分享给需要的同学.zip
最新发布
09-15
自己整理的Ansible 自动化运维实战笔记分享给需要的同学.zip
基于 Flask 和 Stripe 的图书购买系统.zip
09-15
这是一个使用 Flask 和 Stripe 元素构建的电子商务应用程序样本。该项目旨在实现图书购买功能，并通过集成 Stripe 来完成支付流程。项目采用了 Flask 轻量化 Web 框架，利用 Werkzeug 和 WSGI 提供了许多实用功能。该项目通过使用 HTML 渲染和简单的 API 调用实现基本功能。为了完成此项目，需要替换 Stripe 的秘钥和发布密钥。运行服务器后，可以浏览到本地站点，并在其中完成图书购买和支付流程。Stripe API 调用的测试需要添加书籍并完成结账流程。此外，该项目还面临了一些挑战，如集成 Stripe Elements 和实现服务器端 API 调用的数据访问对象模式等。尽管此项目为简化版，但它提供了一个在真实环境中实现电子商务网站的初步框架，为进一步的扩展和改进奠定了基础。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
AngularJS入门到精通指南
"AngularJS - Novice to Ninja" 是一本由 Sandeep Panda 所著，SitePoint 出版...本书适合对 AngularJS 入门或者想要提高技能的开发者，通过实际案例和详细讲解，读者可以逐步从新手成长为精通 AngularJS 的“忍者”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值