-
What is AngularJS?
Open-source, front-end JavaScript framework developed by Google that excels at building dynamic, single page web applications (SPAs) and supports the Model View Controller (MVC) programming structure.
-
What's the main purpose in building AngularJS friendly websites?
It's estimated that 80% of a web application's code base is dedicated to manipulating, traversing, and listening to DOM. That is, to get a value (say, birthday) and then validate or update it's contents (getElementById) required HTML, DOM manipulate, JavaScript, etc...with AngularJS and two way binding, this same value can be validated instantly without modifications to the DOM but rather, binding to a simple POCO object.
Angular also adopts the MVC pattern keeping all entities separate without HTML and Javascript inline statements messing things up.
-
What are the 8 Steps to creating your first AngularJS application.
- 1. Create basic HTML page
- 2. Add a reference to AngularJS framework via script link.
- 3. Use the ng-app and ng-controller directives in a div tag that begins and ends within the page body tags.
- 4. Place a ng-model directive into a username field
- 5. Place a span tag onto the page and bind the username model to a ng-bind directive
- 6. Create a script section within the page and add an application module to it
- 7. Create the business logic of the application by adding a controller
- 8. Create a member variable which attaches to the $scope object.
-
Write a simple 'Good Day, Username!' AngularJS application which shows how two-way binding works.
- <html>
- <head>
- <script src="angular.min.js" />
- </head>
- <body>
- <div ng-app="myApp" ng-controller="myCtrl">
- <p>Enter your name: <input type="text" ng-model="username"></P>
- <p>{{greeting}} <span ng-bind="username /></p>
- <script>
- var app = angular.module('myApp', []);
- app.controller('myCtrl', function($scope) { $scope.greeting = "Good Day, "; });
- </script>
-
What is a controller?
A controller is a Javascipt object that contains the core business logic of an application including properties and functions and takes $scope as an argument. Primary function is to manage the data that gets passed to the view...with an intermediary being the $scope object. This triggers two-way binding between the $scope object and the view with the $scope rendering the model in the view.
Controller => Scope => View
-
Write a simple controller which contains (1) a member variable, a click event, and a custom event.
- app.controller('leadController', function($scope) {
- $scope.username = "John";
- $scope.deleteUser = deleteUser;
- $scope.addUser = function() {
- return $scope.username;
- };
- function deleteUser() {
- // delete user
- }
-
What is the $scope used for?
Its purpose is to bind the Controller to the View..the scope contains the model data an dhas the methods and properties that can be accessed by BOTH of these. In order to use it, you have to pass it to the controller as a parameter, allowing the view to access it.
-
Declare a javascript object of Leads and loop through the object using ng-repeat directive to display a list of lead birthdays and names.
- var car1 = {type:"Fiat", model:"500", color:"white"};
- var car2 = {type:"Fiat", model:"500", color:"white"};
- var person = {first:"John", last:"Doe", age:46};
var cars = [car1, car2];
- <ul>
- <li ng-repeat="car in cars">
- {{car.type}} {{ car.model }}
- </li>
- </ul>
-
What are directives? Give 5 examples
Directives are attributes or markers placed on THML tags to extend the functionality of the HTML object.
For example: ng-app, ng-controller, ng-model, ng-bind, ng-initi
-
Define and differential the following directives: ng-app, ng-controller, ng-model, ng-bind, ng-initi
- ng-app: used to initialize and compile the HTML template
- ng-controller:
- ng-model: is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>.
- ng-bind: The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
- ng-initi: intializes application data
-
Explain the difference between ng-bind and ng-model? Give concrete examples of when to use one over the other.
ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html where val is a variable name.
ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>.
- ng-model should be used for input, textarea or select require HTML elements
- Providing validation behavior (i.e. required, number, email, url).
- Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
- Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) including animations.
Whereas, ng-bind works perfect for simply viewing items such as DIV, SPAN, or straight output using {{greetings}}.
|
|
