Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.
Component-based Architecture
Angular uses a component-based architecture where the application is divided into small, reusable components. Each component has its own HTML template, CSS styles, and TypeScript logic.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Hello, {{name}}!</h1>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
}
Two-way Data Binding
Two-way data binding allows for automatic synchronization of data between the model and the view. This means that any changes in the model are reflected in the view and vice versa.
<input [(ngModel)]="name">
<p>Hello, {{name}}!</p>
Dependency Injection
Dependency Injection (DI) is a design pattern used to implement IoC (Inversion of Control). It allows a class to receive its dependencies from an external source rather than creating them itself. Angular's DI system makes it easy to manage dependencies and promote reusability.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class DataService {
getData() {
return ['data1', 'data2', 'data3'];
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-data',
template: `<ul><li *ngFor="let item of data">{{item}}</li></ul>`
})
export class DataComponent implements OnInit {
data: string[];
constructor(private dataService: DataService) {}
ngOnInit() {
this.data = this.dataService.getData();
}
}
Routing
Angular's Router enables navigation from one view to the next as users perform application tasks. It allows for defining routes and associating them with components, enabling deep linking and navigation.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
// In app.module.ts
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [AppRoutingModule],
// other imports
})
export class AppModule {}
React is a JavaScript library for building user interfaces, maintained by Facebook. Unlike Angular, which is a full-fledged framework, React is a library that focuses on the view layer only. It uses a virtual DOM for efficient updates and is often paired with other libraries for state management and routing.
Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable, meaning you can use as much or as little of Vue as you need. Vue is known for its simplicity and ease of integration with other projects and libraries.
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Svelte writes code that updates the DOM when the state of your app changes.
This repo is for distribution on npm
and bower
. The source for this module is in the
main AngularJS repo.
Please file issues and pull requests against that repo.
You can install this package either with npm
or with bower
.
npm install angular
Then add a <script>
to your index.html
:
<script src="/node_modules/angular/angular.js"></script>
Or require('angular')
from your code.
bower install angular
Then add a <script>
to your index.html
:
<script src="/bower_components/angular/angular.js"></script>
Documentation is available on the AngularJS docs site.
The MIT License
Copyright (c) 2010-2015 Google, Inc. http://angularjs.org
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
1.7.0-rc.0 maximum-overdrive (2018-04-19)
angular.lowercase
and angular.uppercase
(1daa4f,
#15445)angular.isArray()
(e3ece2,
#15533,
#15541)$sce
service
(1e9ead)null
and undefined
greater than other values
(1d8046,
#15294,
#16376)request
and requestError
interceptors (#15674)
(240a3d,
#5146)xlink:href
security context for SVG's a
and image
elements
(6ccbfa,
#15736)Before this commit removeData()
invoked on an element removed its event
handlers as well. If you want to trigger a full cleanup of an element, change:
elem.removeData();
to:
angular.element.cleanData(elem);
In most cases, though, cleaning up after an element is supposed to be done only when it's removed from the DOM as well; in such cases the following:
elem.remove();
will remove event handlers as well.
The $cookieStore has been removed. Migrate to the $cookies service. Note that
for object values you need to use the putObject
& getObject
methods as
get
/put
will not correctly save/retrieve them.
Before:
$cookieStore.put('name', {key: 'value'});
$cookieStore.get('name'); // {key: 'value'}
$cookieStore.remove('name');
After:
$cookies.putObject('name', {key: 'value'});
$cookies.getObject('name'); // {key: 'value'}
$cookies.remove('name');
If you are not using success
or error
callbacks with $resource
,
your app should not be affected by this change.
If you are using success
or error
callbacks (with or without
response interceptors), one (subtle) difference is that throwing an
error inside the callbacks will not propagate to the returned
$promise
. Therefore, you should try to use the promises whenever
possible. E.g.:
// Avoid
User.query(function onSuccess(users) { throw new Error(); }).
$promise.
catch(function onError() { /* Will not be called. */ });
// Prefer
User.query().
$promise.
then(function onSuccess(users) { throw new Error(); }).
catch(function onError() { /* Will be called. */ });
Finally, if you are using success
or error
callbacks with response
interceptors, the callbacks will now always run after the interceptors
(and wait for them to resolve in case they return a promise).
Previously, the error
callback was called before the responseError
interceptor and the success
callback was synchronously called after
the response
interceptor. E.g.:
var User = $resource('/api/users/:id', {id: '@id'}, {
get: {
method: 'get',
interceptor: {
response: function(response) {
console.log('responseInterceptor-1');
return $timeout(1000).then(function() {
console.log('responseInterceptor-2');
return response.resource;
});
},
responseError: function(response) {
console.log('responseErrorInterceptor-1');
return $timeout(1000).then(function() {
console.log('responseErrorInterceptor-2');
return $q.reject('Ooops!');
});
}
}
}
});
var onSuccess = function(value) { console.log('successCallback', value); };
var onError = function(error) { console.log('errorCallback', error); };
// Assuming the following call is successful...
User.get({id: 1}, onSuccess, onError);
// Old behavior:
// responseInterceptor-1
// successCallback, {/* Promise object */}
// responseInterceptor-2
// New behavior:
// responseInterceptor-1
// responseInterceptor-2
// successCallback, {/* User object */}
// Assuming the following call returns an error...
User.get({id: 2}, onSuccess, onError);
// Old behavior:
// errorCallback, {/* Response object */}
// responseErrorInterceptor-1
// responseErrorInterceptor-2
// New behavior:
// responseErrorInterceptor-1
// responseErrorInterceptor-2
// errorCallback, Ooops!
request
and requestError
interceptors (#15674)Previously, calling a $resource
method would synchronously call
$http
. Now, it will be called asynchronously (regardless if a
request
/requestError
interceptor has been defined.
This is not expected to affect applications at runtime, since the
overall operation is asynchronous already, but may affect assertions in
tests. For example, if you want to assert that $http
has been called
with specific arguments as a result of a $resource
call, you now need
to run a $digest
first, to ensure the (possibly empty) request
interceptor promise has been resolved.
Before:
it('...', function() {
$httpBackend.expectGET('/api/things').respond(...);
var Things = $resource('/api/things');
Things.query();
expect($http).toHaveBeenCalledWith(...);
});
After:
it('...', function() {
$httpBackend.expectGET('/api/things').respond(...);
var Things = $resource('/api/things');
Things.query();
$rootScope.$digest();
expect($http).toHaveBeenCalledWith(...);
});
Previously the tpload
error was namespaced to $compile
. If you have
code that matches errors of the form [$compile:tpload]
it will no
longer run. You should change the code to match
[$templateRequest:tpload]
.
The service now returns the result of $templateCache.put()
when making a server request to the
template. Previously it would return the content of the response directly.
This now means if you are decorating $templateCache.put()
to manipulate the template, you will
now get this manipulated result also on the first $templateRequest
rather than only on subsequent
calls (when the template is retrived from the cache).
In practice this should not affect any apps, as it is unlikely that they rely on the template being
different in the first and subsequent calls.
$animate.cancel(runner) now rejects the underlying promise and calls the catch() handler on the runner returned by $animate functions (enter, leave, move, addClass, removeClass, setClass, animate). Previously it would resolve the promise as if the animation had ended successfully.
Example:
var runner = $animate.addClass('red');
runner.then(function() { console.log('success')});
runner.catch(function() { console.log('cancelled')});
runner.cancel();
Pre-1.7.0, this logs 'success', 1.7.0 and later it logs 'cancelled'. To migrate, add a catch() handler to your animation runners.
FAQs
HTML enhanced for web apps
The npm package angular receives a total of 407,885 weekly downloads. As such, angular popularity was classified as popular.
We found that angular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.