Welcome to the AngularJS Environment Homepage, Guest!


AngularJS | Environment


AngularJS can be found here. You will need the latest version, and specific minified, uncompressed, or zip options. If you are planning on serving the files from a static location via your systems, then uncompressed or zip is for you. If you just plan on utilizing a few features of AngularJS on a website you designed, minified is your option. Minified allows you to copy the CDN and reference the files within the html document. Create a script element with the src being the address for the CDN, and you are ready to utilize AngularJS functionality.
Warning. Before we move any further, your server side security needs to be in proper working order. AngularJS is built upon Javascript, and with that being said, Javascript is a not so secure language.




AngularJS can be set up in many different ways. I would recommend downloading the folder located right Here. The folder contains a angularjs.min.js file, two angularjs html documents, and a script.js file which are everything you need to get caught up to speed. The folder can be placed on your desktop or wherever you wish. You will need a text editor to edit the js and html files. If you open the html files by double clicking on them, your web browser will open the files. Be sure to know how to open a file for viewing, and opening a file for editing. I suggest using Notepad++. Notepad++ allows you to easily have all of your files open for editing, while saving all necessary files, and is great for any developer who doesn't want to use any IDE platforms. The code below is the same code inside the folder; angularjs2.html and script.js.




angularjs.html


<!DOCTYPE html>


<!-- We declare our ng-app on the html element


This will tell the html document what part


or element contains the AngularJS app data-->


<html ng-app="appname">


<!-- -->


<!-- This is where you link to AngularJS


link to a stylesheet


and to our script file; script.js -->


<head>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>


<link href="style.css" rel="stylesheet"/>


<script src="script.js"></script>


</head>



<body>


<!-- This is the view part


ng-controller tells AngularJS what controller to usemap


This will render the greeting and additionalGreeting


that was hard coded in the script.js file


-->


<div ng-controller="appCtrl">


<p> world, </p>


</div>


</body>


</html>




script.js


// This is for tutorial purposes only


// This is the controller aspect of AngularJS


// A variable is created that is set to a angular.module


// with the appname and an empty array as parameters


var appname = angular.module('appname', []);


// This code registers a controller function named appCtrl in the Angular module


// named appname.


appname.controller('appCtrl', ['$scope',


function($scope) {


$scope.greeting = { text: 'Hello' };


$scope.additionalGreeting = {text: 'my name is James Patterson.'};


}]);




When the page is loaded by a web browser, the following things happen in order.

  • HTML documents are loaded, evaluated, AngularJS loads the js file, amd tje angular global object is created.
  • Next, JS registers the controller functions and executes them.
  • Next, AngularJS scans the HTML document looking for Angular apps and views.
  • Once a view is found, the view is connected to the controller function associated with it.
  • AngularJS then executes the controller functions, renders the view with the information from the model received from the controller, and the page is then ready to be viewed by the user.




Next, we will take a look at the MVC Architecture of AngularJS

Just follow the buttons to continue the tutorial, Guest