SoFunction
Updated on 2025-04-04

AngularJS Basics

angularJS definition and features

Front-end open source framework

(model view view-model) Design mode: The Model will interact with the ViewModel (through the $scope object) and will listen for the changes in the Model. These can be sent and rendered through View, and HTML shows your code

3. Convenient REST

4. Data binding and dependency injection

5. You can operate HTML like XML. AngularJS can complete the relevant settings through its own compiler and directives.

6. The template is passed as a DOM element to Angular's compiler

HTML is extended through directives and data is bound to HTML through expressions.

Build an angularJS application

Add Angular's <script> tag to the <head> tag

Copy the codeThe code is as follows:

<script src="///ajax/libs//1.3.0/"></script>

Add ng-app directive to <body> tag

Copy the codeThe code is as follows:

<body
    ng-app="guetonline"
    ng-controller="MainController"
    >

Create a new directory script and file, define and configure all modules and dependencies

Copy the codeThe code is as follows:

var app = ('guetonline', [
  'ngRoute',
  'mobile-angular-ui',
  ''
]);

Define controllers, services, and instructions in module app

Copy the codeThe code is as follows:

( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //Controller
( 'MainSevicel', function() {} ) //Service
( 'dragToDismiss', function() {} ) //Instructions

Define routes in module app

Copy the codeThe code is as follows:

(function($routeProvider) {
  $('/',              {templateUrl: 'index/home', reloadOnSearch: false});
  $('/scroll',        {templateUrl: '', reloadOnSearch: false});
  $('/toggle',        {templateUrl: '', reloadOnSearch: false});
  $('/tabs',          {templateUrl: '', reloadOnSearch: false});
  $('/accordion',     {templateUrl: '', reloadOnSearch: false});
  $('/overlay',       {templateUrl: '', reloadOnSearch: false});
  $('/forms',         {templateUrl: '', reloadOnSearch: false});
  $('/dropdown',      {templateUrl: '', reloadOnSearch: false});
  $('/drag',          {templateUrl: '', reloadOnSearch: false});
  $('/carousel',      {templateUrl: '', reloadOnSearch: false});
  $('/news/official_view',      {templateUrl: '/news/official_view', reloadOnSearch: false});
});

to be continued. . Next step is to learn more in-depth steps, and there are filters