angular入门

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量71 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：https://my.oschina.net/u/4117203/blog/3040165
版权 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>angular初始化</title>
      <script src="../js/angular.js"></script>
   </head>
   <body ng-app ng-init="username='陈大海'">
      <input type="text" ng-model="username"/><br />
      {{username}}
   </body>
</html>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>angular的运算</title>
      <script src="../js/angular.js"></script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
      x:<input ng-model="x" /><br />
      y:<input ng-model="y" /><br />
      <button ng-click="add()">运算</button>
      运算结果{{z}}
   </body>
   <script>
      var app=angular.module("myapp",[]);
      app.controller("myctrl",function($scope){
         $scope.add=function(){
            $scope.z=parseInt($scope.x)+parseInt($scope.y);
         }
      })
      
   </script>
</html>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>angular的双向绑定(同显)</title>
      <script src="../js/angular.js"></script>
   </head>
   <body ng-app>
      <input type="text" ng-model="username"/><br />
      你输入的值为{{username}}<br />
      <input type="text" ng-model="username"/><br />
      你输入的值为{{username}}
   </body>
</html>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>angular的运算</title>
      <script src="../js/angular.js"></script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
      x:<input ng-model="x" /><br />
      y:<input ng-model="y" /><br />
      运算结果{{add()}}
   </body>
   <script>
      var app=angular.module("myapp",[]);
      app.controller("myctrl",function($scope){
         $scope.add=function(){
            return parseInt($scope.x)+parseInt($scope.y);
         }
      })
      
   </script>
</html>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>angular远程读取json</title>
      <script src="../js/angular.js"></script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl" ng-init="findAll()">
      <table>
         
         <tr ng-repeat="entity in list">
            <td>{{entity.classification}}</td>
            <td>{{entity.name}}</td>
            <td>{{entity.price}}</td>
         </tr>
      </table>
   </body>
   <script>
      var app=angular.module("myapp",[]);
      app.controller("myctrl",function($scope,$http){
         $scope.findAll=function(){
            $http.get("data.json").success(function(response){
            $scope.list=response;  
            })
         };
      });
      
   </script>
</html>

    json文件

[{"classification":"饮料","name":"可口可乐","price":"3","unit":"瓶"},  
{"classification":"饮料","name":"雪碧","price":"3","unit":"瓶"},  
{"classification":"水果","name":"苹果","price":"5.5","unit":"斤"},  
{"classification":"水果","name":"荔枝","price":"15","unit":"斤"},  
{"classification":"生活用品","name":"电池","price":"2","unit":"个"},  
{"classification":"食品","name":"方便面","price":"4.5","unit":"袋"}]
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>angular遍历对象</title>
      <script src="../js/angular.js"></script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
      <table>
         <tr >
            <td>姓名</td>
            <td>数学</td>
            <td>语文</td>
         </tr>
         <tr ng-repeat="entity in list">
            <td>{{entity.name}}</td>
            <td>{{entity.shuxue}}</td>
            <td>{{entity.yuwen}}</td>
         </tr>
      </table>
   </body>
   <script>
      var app=angular.module("myapp",[]);
      app.controller("myctrl",function($scope){
         $scope.list=[{name:"张三",shuxue:20,yuwen:52},
         {name:"李四",shuxue:20,yuwen:52},
         {name:"王五",shuxue:20,yuwen:52}];
      });
      
   </script>
</html>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>angular遍历数组</title>
      <script src="../js/angular.js"></script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
      <table>
         <tr >
            <td>数字</td>
            
         </tr>
         <tr ng-repeat="entity in list">
            <td>{{entity}}</td>
            
         </tr>
      </table>
   </body>
   <script>
      var app=angular.module("myapp",[]);
      app.controller("myctrl",function($scope){
         $scope.list=["1","2","3","4","5","6","7"];
      });
      
   </script>
</html>
<!DOCTYPE html>
<html>
<head>
    <body ng-app>
    <meta charset="UTF-8">
    <title>\HelloWorld</title>
    <script src="../js/angular.js"></script>
</head>
<input type="text" ng-model="username"/><br />
<p>你输入的内容: <span>{{username}}</span></p>
</body>
</html>

 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>angular的双向绑定(同显)</title>
      <script src="../js/angular.js"></script>
   </head>
   <body ng-app>
      {{100+100}}
   </body>
</html>

 

转载于:https://my.oschina.net/u/4117203/blog/3040165

chizi7811
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular入门基础1
08-08
Angular入门基础第1节AngularJs概述1.1什么是AngularJsAngularJs是一个Javascript framework，也就是一个js
【Angular 2+】 监听路由动态设置页面meta
书呆子ITme
01-24 930
angular2+ 里默认切换路由或者切换组件，页面的meta是不会变化的。 如果想针对每个路由设置页面标题，要使用 Meta 服务，我们需要从 @angular/platform-browser 库导入 Meta 类，然后利用 Angular 依赖注入的机制，通过构造注入的方式注入 Meta 服务。其Meta Service 提供了addTag()、addTags()、getTag()、getT...
angular 入门
weixin_42114897的博客
07-19 2371
一、安装 1.安装@angular/cli cnpm i -g @angular/cli 2.使用脚手架工具创建项目 ng new angular-demo 3.安装依赖 cnpm install || cnpm i 4.启动项目 ng server --port 5000 --open 创建新组件 ng generate component NewComponentName 6.创建模块 ng generate module 模块名称 7.创建服务 ng generate service
angular入门教程
风水道人
04-12 1692
# 创建项目 ng new 项目名称 创建完执行：npm install # 只是声明了一个普通的类 export class ServerComponent{ } # @Component 表示是angular的组件,使用组件前必须先引入 import { Component } from '@angular/core'; @Component export class ServerComponent{ } # 对象选择器,selector 选择器可以自定义，templateUrl 模板文件 @.
Angular入门
我有明珠一颗的博客
03-22 409
    今日偶刷朋友圈，某友人因研究Angular有感而发，作两篇博文，引得清华学子前来，问其是否出书，把我吓一跳，赶紧百度看看这个Angular是个何许人也，看简单介绍就觉得挺有意思的，决定入个坑。1、AngularJS 是一个可以通过&lt;script&gt;标签添加到&lt;html&gt;的 javascript 框架。&lt;script src="http://cdn.static....
Angular入门学习笔记
热门推荐
K One
07-10 1万+
Angular学习笔记，Angualr安装，Angular入门，Angular实战,ANgualr路由守卫
Angular入门实战Day01
qq_45300172的博客
12-18 473
Angular 基于 TypeScript，和 react、vue 相比，Angular更适合中大企业级项目。
Angular 入门
Taylover-Cam的博客
09-07 443
一、安装 module load ossjs/node/8.11.1 //load Node.js npm install -g @angular/cli ng version //angular version npm run start // run the application locally 通过在package.json文件中修改st...
学习Angular入门
m0_64167950的博客
04-20 145
只需几行 TypeScript 即可创建您的第一个 Angular 应用程序。随着应用的增长，可以将标记和代码分离到不同的文件中。新行将添加一个新元素。当该事件发生在按钮中时，双引号中的 TypeScript 代码会将该属性设置为。在代码编辑器中，在值之后和 以 开头的行之前，添加此代码，使按钮具有粗体文本和圆角。在代码编辑器的值中，在以 开头的行后面添加此行。你的第一个 Angular 应用。您还可以向新组件添加样式。计数器值应返回为零。
Angular入门实战Day08
qq_45300172的博客
02-22 288
Angular中的路由
Angular入门教程1
08-08
1.搭建环境1.1 安装NodeJs安装Nodejs：sudo apt install curl浏览器打开 2-file-upload:https://gith
angular入门开始项目
05-25
angular入门开始项目
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 120
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 199
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 238
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 758
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 856
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值