Getting Started with Visual Studio Code and AngularJS
Visual Studio Code Setup
Download the IDE from: https://code.visualstudio.com/ — choose the stable build.
Applying Chinese Language Pack:
Open the Extensions panel on the left sidebar, search for "chinese", install the extension, then restart the editor.
Editor Layout Overview
The VS Code interface consists of five main regions:
- Activity Bar — Contains shortcuts for opening the sidebar, search, Git integration, debugger, and extensions.
- Sidebar — Manage project files and folders.
- Editor Area — Write and edit code.
- Panel Bar — Includes Problems, Output, Debug Console, and Terminal tabs. The terminal is essential for running CLI commands.
- Status Bar — Displays file and project information.
If the panel bar is hidden, enable it via: View → Appearance → Show Panel.
Git Initialization
When attempting to commit changes manual via Git, you might encounter:
fatal: not a git repository (or any of the parent directories): .git
This occurs because no local repository exists yet. Initialize one with:
git init
Running HTML Files in Browser
Install the "open in browser" extension from the marketplace. Right-click any HTML file and select "Open in Default Browser" to preview.
AngularJS Fundamentals
AngularJS is a JavaScript framework distributed as a single library file. Include it via a script tag placed at the bottom of the <body> for optimal page load performance:
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
Understanding Scope
An AngularJS application consists of three parts:
- View — The HTML DOM
- Model — Available data within the current view
- Controller — JavaScript functions that manage data and logic
The $scope object serves as the model and bridges data between the controller and view. Properties and methods attached to $scope become accessible in the view without the prefix—simply referance them directly like {{propertyName}}.
Root Scope
Every Angular application has a $rootScope that operates across the entire application wherever ng-app is defined. It acts as a parent scope enabling data sharing across different controllers.
<div ng-app="myApp" ng-controller="mainCtrl">
<h1>{{surname}} Family:</h1>
<ul>
<li ng-repeat="member in members">{{member}} {{surname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope, $rootScope) {
$scope.members = ["Alice", "Bob", "Charlie"];
$rootScope.surname = "Smith";
});
</script>
Core Directives
| Directive | Purpose |
|---|---|
ng-app |
Marks the root element of an AngularJS application |
ng-controller |
Attaches a controller to the view |
ng-model |
Binds input values to application variables |
ng-bind |
Binds element content to application data |
ng-repeat |
Iterates over collections |
HTML5 supports custom attributes prefixed with data-. Use data-ng-* as a valid HTML5 alternative to ng-*.
Controller Patterns
Controller as Property:
<div ng-app="" ng-controller="userController">
First Name: <input type="text" ng-model="user.firstName"><br>
Last Name: <input type="text" ng-model="user.lastName"><br>
</div>
<script>
function userController($scope) {
$scope.user = {
firstName: "Jane",
lastName: "Doe"
};
}
</script>
<script src="https://cdn.staticfile.org/angular.js/1.2.5/angular.min.js"></script>
Key distinctions:
- Requires the AngularJS libray script tag
- Cannot use the
ng-appattribute value when using global controller functions - Object properties use colon notation with comma separators
Controller as Method:
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
Full Name: {{getFullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.getFullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
Two-Way Data Binding and Form Validation
<div ng-app="app">
<div ng-controller="mainCtrl">
Name: <input ng-model="name">
<h1>Hello {{name}}</h1>
<h2 ng-bind="name"></h2>
</div>
<form name="userForm">
Email: <input type="email" name="emailInput" ng-model="email"><br>
<span ng-show="userForm.emailInput.$error.required">Email is required.</span>
<span ng-show="userForm.emailInput.$error.email">Invalid email format.</span>
<h1>Form State:</h1>
Valid: {{userForm.emailInput.$valid}}<br>
Invalid: {{userForm.emailInput.$invalid}}<br>
Dirty: {{userForm.emailInput.$dirty}}<br>
Pristine: {{userForm.emailInput.$pristine}}<br>
Touched: {{userForm.emailInput.$touched}}<br>
Untouched: {{userForm.emailInput.$untouched}}
</form>
</div>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<script>
var app = angular.module("app", []);
app.controller("mainCtrl", function($scope) {
$scope.name = "Initial Value";
});
</script>
Form Validation Properties
| Property | Description |
|---|---|
$valid |
Returns true when input passes validation |
$invalid |
Returns true when input fails validation |
$dirty |
Returns true when user has modified the input |
$pristine |
Returns true when user has not modified the input |
$touched |
Returns true when input has been focused and then blurred |
$untouched |
Returns true when input has not been focused or blurred |
Reference: https://www.runoob.com/angularjs/angularjs-intro.html
