入职之后的第一个项目:
第一个技能点:vusual studio前端开发工具+angularjs
(一)vusual studio开发工具
官网下载地址:https://code.visualstudio.com/,下载时选择稳定版stable并安装完成
汉化步骤:选择左侧栏目最下端“插件”,搜索chinese安装之后重新启动就可以了,如下图
Vscode界面介绍(主要分为5个区域,分别是活动栏,侧边栏,编辑栏,面板栏,状态栏):
描述如下①:活动栏从上到下依次为,打开侧边栏,搜索,使用git,debug,使用插件
②:侧边栏,新建项目文件和文件夹
③:编辑栏,编写代码的区域
④:面板栏,从左到右依次为,问题,输出,调试栏,终端(terminal),最重要的是terminal,用来输入相关命令
没有面板栏的话:查看-->外观-->显示面板
利用vscode自带的git, 手动手写git命令,提交时报错提示:
fatal: not a git repository (or any of the parent directories): .git
原因: 没有本地git资源管理库(没有本地初始化)。
执行命令:git init
vscode运行html文件怎样在浏览器中查看:
依旧点击插件:view-in-browser安装,然后右键点击html文件,选择view-in-***就可以在浏览器中查看了
(二)angularjs
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
官网建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载
控制器属性案例如下,底部有控制器函数案例及区分说明
HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效
Scope 概述
AngularJS 应用组成如下:
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。
视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{name}}。
根作用域
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{lastname}} 家族成员:</h1> <ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnes"; }); </script>
基础属性:
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令指明了应用, ng-controller 指明了控制器。
上图为控制器属性案例,下面为控制器函数案例:
<div ng-app="" ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> </div> <script> function personController($scope) { $scope.person = { firstName: "John", lastName: "Doe", } } </script> <script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
区别:
一、jar包不同,控制器函数需要用到angularjs包
二、使用控制器函数,不能有ng-app属性值。
三、控制器函数对象赋值:冒号赋值,逗号隔开。
控制器方法案例,此处直接调用控制器中的fullName属性(方法返回值):
<div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>
模型案例:
双向绑定、表单验证及表单各属性
<!--指明app为angular应用-->
<div ng-app="app">
<!--双向绑定,控制器属性-->
<div ng-controller="control">
姓名:<input ng-model="name" >
<br>
<h1>hello {{name}}</h1>
<h2 ng-bind="name"></h2>
</div>
<!--表单校验-->
<form name="myForm">
email:<input type="email" name="myemail" ng-model="text">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.myemail.$error.email">不是一个合法的邮箱地址</span>
<h1>表单属性状态:</h1>
valid 验证全部通过:{{myForm.myemail.$valid}}<br>
invalid 不通过:{{myForm.myemail.$invalid}}<br>
dirty 修改过:{{myForm.myemail.$dirty}}<br>
pristine 没有修改过:{{myForm.myemail.$pristine}}<br>
touched 获取过焦点且已离开:{{myForm.myemail.$touched}}<br>
untouched 没有获取过焦点且已离开:{{myForm.myemail.$untouched}}
</form>
</div>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<script>
var app = angular.module("app",[])
app.controller("control",function($scope){
$scope.name = "123"
})
</script>
初始工具、框架实例完毕。
angularjs官网实例链接:https://www.runoob.com/angularjs/angularjs-intro.html