How to Start Using Javascript with Angular

From WikiHTP

If you want to know what you need right now to start using Angular, you've come to the right place. Angular is an excellent tool that will give you an excellent and unique way of programming in JavaScript.

Including AngularJS scripts from Google CDN[edit]

The quickest way to start using this powerful tool is to use your familiar HTML <script> language tag to a Google CDN URL. In this way, you will not have to download anything to your personal computer, nor will you have the need to maintain a local copy.

There are two types of AngularJS script URLs that you can use. It is very simple, you only have to choose one of them; there is one for development and one for production:

  • angular.js : This is the human-readable version, as it is not modified, and is highly recommended for suitable for web development.
  • angular.min.js : This is already the mined version, which I strongly recommend that you use it more than anything else for production.

To direct your code to an AngularJS script hosted on Google's CDN server, use the template shown at the bottom of this paragraph, it is important to emphasize that this example is especially aimed at the minimized version 1.5.6. Here I leave it for you:

<!DOCTYPE html>
<html ng-app>
  <head>
    <title> My first project in Angular JS </title>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
    </script>
  </head>
<body>
</body>
</html>

Note: Please note that only versions 1.0.1 and above are available on the CDN. If you need an older version (which you shouldn't need or use) you can use the URL https://code.angularjs.org/, which is the previously recommended location for the source code of older versions. If you are still using the AngularJS server, you should switch to the CDN version for even faster load times.

Download and host AngularJS files locally[edit]

This option is for those who want to work with AngularJS offline, or for those who want to host AngularJS files on their own servers.

If you navigate to https://code.angularjs.org/, you will see a directory listing with all versions of AngularJS since we started releasing the versioned build artefacts. Each directory contains all the artefacts that we release for a particular version. Download the version you want and have fun.

Note: You can ignore directories that start with 2. (eg 2.0.0.0-beta.17) - they are not related to AngularJS. They contain build artefacts from the Angular versions.

Each directory under https://code.angularjs.org/ includes a set of files that comprise the corresponding version. All JavaScript files (with the exception of Angular files, which are only used during development) come in two versions: one suitable for development and one suitable for production:

  • <filename> .js - These files are not hidden, unmodified and human-readable when opened in any editor or browser. For best error messages during development, you should always use these unmodified scripts.
  • <filename> .min.js - They are minimized and obfuscated versions, created with the Closure compiler. Use these versions for production in order to minimize the size of the application that your user's browser downloads.
  • <filename> .min.js.map - These are source map files. You can serve them together with the .min.js files so that you can debug your minified code (for example, in a production deployment) more easily, but without affecting performance.

The set of files included in each version directory is:

  • angular.zip - This is a zip file that contains all the files released for this version of AngularJS. Use this file to get everything in one download.
  • angular.js - The core of the AngularJS structure. This is all you need to get your AngularJS application working.
  • angular-csp.css - You only need this file if you are using CSP (Content Security Policy). See here for more information.
  • angular-mocks.js - This file contains an implementation of mocks that makes testing angular applications even easier. Your integration/unit test harness should load this file after loading the angular.js file.
  • angular-loader.js - Module loader for AngularJS modules. If you are loading multiple script files containing AngularJS modules, you can load them asynchronously and in any order as long as you load this file first. The content of this file is often copied and pasted into the index.html to avoid even the initial request to the angular loader [.min] .js. See Angular Seeds for an example of use.
  • Additional AngularJS modules: Optional modules with additional functionality. These files should be loaded after the kernel angular [.min] .js file :
    • angular-animate.js - Enable animation support. (API docs)
    • angular-aria.js - Make your applications accessible to assistive technology users. (API docs)
    • angular-cookies.js - A convenient wrapper for reading and writing browser cookies. (API docs)
    • angular-message-format.js - Improved support for pluralization and gender-specific messages in interpolated text. (API docs)
    • angular-messages.js - Improved support for displaying validation messages. (API docs)
    • angular-parse-ext.js - Allow Unicode characters in identifiers within AngularJS expressions. (API docs)
    • angular-resource.js - Easy interaction with RESTful services. (API docs)
    • angular-route.js - Routing and deep-linking services and directives for AngularJS applications. (API docs)
    • angular-sanitize.js - Functionality to sanitize HTML. (API docs)
    • angular-touch.js - Touch events for touch devices. (API docs)
  • docs / - This directory contains all the files that make up the documentation application https://docs.angularjs.org/ These files are useful for viewing previous versions of our documents or, more importantly, for viewing documents without Connection.
  • i18n / - This directory contains locale-specific ngLocale AngularJS modules to override the default values ​​defined in the main ng module.

Why is this project called "AngularJS"? Why is the namespace called "ng"? Because HTML has angle brackets and "ng" sounds like "AngularJS".

Is AngularJS a library, framework, plugin, or browser extension? AngularJS better fits the definition of a framework, although it is much lighter than a typical framework and that is why many confuse it with a library.

AngularJS is 100% JavaScript, 100% client, and compatible with desktop and mobile browsers. So it is definitely not a plugin or some other native browser extension.

What is the AngularJS versioning strategy?[edit]

In AngularJS we do not allow intentional break changes to appear in versions where only the "patch" number changes. For example, between 1.3.12 and 1.3.13 there can be no breakout changes. We allow breakout changes to occur between "minor" number changes. For example, between 1.3.15 and 1.4.0 there are a number of breakout changes. This means that AngularJS does not follow semantic versioning (semver) where break changes are only allowed when the "major" version changes.

We also allow breakout changes between beta versions of AngularJS. For example, between 1.4.0-beta.4 and 1.4.0-beta.5 there may be breakout changes. We strive to minimize these types of changes only in cases where there is a strong use case, such as a highly requested feature enhancement, significant code simplification, measurable performance improvement, or better experience. from the developer (especially when it comes to upgrading to Angular).

When we're launching we generate updates to the changelog directly from commits. This generated update contains a highlighted section that contains all the break changes that have been pulled from commits. We can quickly see in the new changelog exactly which commits contain break changes and so can application developers when they are deciding whether to upgrade to a new version of AngularJS.

Features with non-broken changes may also appear in the patch version, for example in version 1.6.3 there may be a feature that is not available in 1.6.2.

Lastly, feature deprecation can also appear in "minor" version updates. This means that the features will continue to work in this release, but sometimes they need to be specifically enabled.

When are obsolete functions removed from the library?[edit]

Most of the time we remove an outdated feature in a new minor version. For example, the preAssignBindingsEnabled $ compileProvider method was defined in AngularJS 1.5.10, deprecated in 1.6, and will be removed in 1.7.

In the case of jqLite we apply a differBold textent approach - we deprecate features that have an equivalent in jQuery that is also deprecated, but we only remove the feature once it is removed from jQuery to improve jqLite and jQuery compatibility. An example of this is the bind method, deprecated in favor of on but not likely to be removed from jqLite in the near future.

Is AngularJS a template system?[edit]

At the highest level, AngularJS looks like just another template system. But there is an important reason why the AngularJS template system is different, which makes it well suited for application development: bi-directional data binding. The template is compiled in the browser and the compilation step produces a live view. This means that you, the developers, don't need to write code to constantly sync view to model and model to view like in other template systems.

About This Tutorial

This page was last edited on 8 August 2020, at 23:53.