angular入门--绑定字符串
要使用angularjs，首先得下载并且在页面中调用它
先上源码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html ng-app="app1"> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>angularJs Test</title> <script src="angular.min.js"></script> </head> <body ng-controller='ctrl1' > <span ng-bind='name'>aaaaaaaaaaaa</span> <script> var app=angular.module('app1',[]); app.controller('ctrl1',['$scope',function($scope){ $scope.name="China"; }]) </script> </body></html> |
几个说明
1.ng-app代表这是一个angularJs app
2.ng-controller代表这是一个控制器，简单来讲它定义了作用域；
3.如何绑定字符串
1 | <span ng-bind='name'>aaaaaaaaaaaa</span> |
1 | <span ng-bind-template='this is :{{name}}'>aaaaaaaaaaaa</span> |
第一种方式直接绑定了scope的一个变量
第二种方式可以在绑定scope name的情况下，可以在前面加上this is:
但是无论哪种方式，都会冲掉span里面有的aaaaaaaaaaaaa内容
效果如下
第一种解析结果
第二种解析结果
其实还有第三种方式，不过这种方式当angular没有加载完时，会直接显示在页面上，简单讲页面会显示没有解析的结果，代码和效果也上吧
1 | <span >aaaaaaaa:{{name}}</span> |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗