angular-notes
book-body
Contents
local
The version 1.* of Angular is also known as AngularJs.
Very good video by Dan Wahlin:
https://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes
The code is here: https://github.com/gurjeet/AngularJSDemos
Uses SPA - Single Page Application - Yet modular too.
You can simply bind the data input with your model view template. What ever you type appears below in the same div as below. How is this implemented ? By angular.js script that is included at the bottom :
<div class="container">
<h3>Data Binding Fundamentals</h3>
<h4>Using a Data Binding Template</h4>
Name: <input type="text" data-ng-model="name" /> {{ name }}
</div>
<script src="angular.js" />
There is angular.js javascript you include at the bottom, and use some specific tags in your normal html code. Similar to Jquery, it processes your DOM and you get your SPA. :
<h3>Filtering and Sorting Data using "filter"</h3>
<!-- As you type input the filtered values appear below ... -->
<div class="container" data-ng-controller="SimpleController">
<input type="text" data-ng-model="nameText" />
<ul>
<li data-ng-repeat="customer in customers | filter:nameText | orderBy:'name'">
{{ customer.name | uppercase }} - {{ customer.city }}</li>
</ul>
</div>
<script>
function SimpleController($scope) {
$scope.customers = [ // Init model data.
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Phoenix' }
];
$scope.addCustomer = function () { // Define model API functions.
$scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city });
}
}
...
</script>
Concepts supported :
It is great, but the limitations are:
Then Angular 2 was born.
npm install -g @angular/cli # Install globally.
ng new my-project
cd my-project
ng serve # Navigate to http://localhost:4200.
ng test
ng build --prod OR ng serve --prod # Build
ng test # Test is done through Karma; watch for changes.
ng test --watch=false or --single-run # Just test. No need to watch.
ng e2e # End-to-end tests run via Protractor.
# Protractor is browser simulator.
ng generate #
ng lint
ng get/ng set
ng update
To re-install or upgrade ng-cli :
[sudo] npm uninstall -g angular-cli @angular/cli
npm cache clean
[sudo] npm install -g @angular/cli
# List user installed packages
npm list -g --depth=0
Synopsis:
ng generate class my_class
# Available Schematics:
class
component
directive
enum
guard
interface
module
pipe
service
appShell
application
library
universal
Options
dry-run
force
Synopsis:
# Install node version manager
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
<magnet:?xt=urn:btih:d3520b5b2a3a178f9f050a33bf7cfcc145f8928e&dn=Udemy+-+Angular+Crash+Course+for+Busy+Developers&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Fzer0day.ch%3A1337&tr=udp%3A%2F%2Fopen.demonii.com%3A1337&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Fexodus.desync.com%3A6969>
MEAN stack guide by maximilian
<magnet:?xt=urn:btih:0a23d6c47c674ceeca251d8097ee5096013c7788&dn=Udemy+-+Angular+%26amp%3B+NodeJS+-+The+MEAN+Stack+Guide+&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Fzer0day.ch%3A1337&tr=udp%3A%2F%2Fopen.demonii.com%3A1337&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Fexodus.desync.com%3A6969>