50 Most Useful Angular JS Version 1 code Snippets

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

app.controller('MainCtrl', function($scope) {
  $scope.title = "Hello AngularJS";
});

<p>{{ title }}</p>

<p ng-bind="title"></p>

<input type="text" ng-model="name" />
<p>Hello {{ name }}</p>

<p ng-if="isVisible">This is visible</p>

<p ng-show="showText">Shown Content</p>
<p ng-hide="hideText">Hidden Content</p>

<ul>
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

<div ng-switch="value">
  <div ng-switch-when="a">A</div>
  <div ng-switch-when="b">B</div>
  <div ng-switch-default>Other</div>
</div>

app.directive('myDirective', function() {
  return {
    template: '<p>This is my directive</p>'
  };
});

app.service('MyService', function() {
  this.sayHello = function() {
    return "Hello from service";
  };
});

app.factory('DataFactory', function() {
  var data = { message: "Shared Data" };
  return { get: () => data };
});

app.provider('Config', function() {
  this.$get = function() {
    return { apiUrl: '/api/v1' };
  };
});

app.controller('TestCtrl', function($scope, MyService) {
  $scope.greeting = MyService.sayHello();
});

$http.get('/api/data').then(function(response) {
  $scope.data = response.data;
});

<input type="text" ng-model="username" />
<p>You typed: {{ username }}</p>

<form ng-submit="submitForm()">
  <input ng-model="user.email" required />
  <button type="submit">Submit</button>
</form>

<input type="email" ng-model="user.email" required />
<span ng-show="myForm.email.$error.required">Email is required!</span>

<input type="text" ng-model="name" />
<p ng-show="myForm.name.$dirty">Field changed</p>

<button ng-disabled="myForm.$invalid">Submit</button>

<p>{{ price | currency:'USD$' }}</p>

<p>{{ today | date:'fullDate' }}</p>

app.filter('reverse', function() {
  return function(input) {
    return input.split('').reverse().join('');
  };
});

<p>{{ longText | limitTo:50 }}</p>

<li ng-repeat="item in items | orderBy:'name'">{{ item.name }}</li>

app.config(function($routeProvider) {
  $routeProvider
    .when('/home', { templateUrl: 'home.html', controller: 'HomeCtrl' })
    .otherwise({ redirectTo: '/home' });
});

<a ng-href="#!/home">Go Home</a>

app.controller('DetailCtrl', function($routeParams) {
  console.log($routeParams.id);
});

<div ng-view></div>

$routeProvider.otherwise({ template: '<h1>Not Found</h1>' });

$scope.$watch('name', function(newVal, oldVal) {
  console.log('Name changed:', newVal);
});

$scope.$apply(function() {
  $scope.value = "Updated";
});

app.directive('userCard', function() {
  return {
    scope: { user: '=' },
    template: '<p>{{ user.name }}</p>'
  };
});

scope: { data: '=' }

scope: { label: '@' }

<button ng-click="sayHello()">Click</button>

$scope.$emit('customEvent', { data: 123 });

$scope.$broadcast('childEvent', { msg: "Hello" });

$scope.$on('customEvent', function(event, args) {
  $scope.received = args.data;
});

<input ng-model="value" ng-change="changed()" />

<li ng-repeat="item in items track by $index">{{ item }}</li>

<p>{{::username}}</p>

<p ng-cloak>{{ title }}</p>

<input ng-model="search" ng-model-options="{ debounce: 500 }" />

<li ng-repeat="user in users track by user.id">{{ user.name }}</li>

$timeout(function() {
  $scope.message = "Updated after delay";
}, 2000);

$interval(function() {
  $scope.counter++;
}, 1000);

var deferred = $q.defer();
$http.get('/api').then(deferred.resolve, deferred.reject);
return deferred.promise;

<div ng-include="'template.html'"></div>

app.constant('API_URL', '/api/');
app.value('version', '1.0.0');