Angular 4.3 Now Available

Angular version 4.3 has been released. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

What’s new?

• We are introducing HttpClient, a smaller, easier to use, and more powerful library for making HTTP Requests. Learn more about it from our docs
• New router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing set of life cycle event such as NavigationStart
• Conditionally disable animations via a new attribute, [@.disabled]
• Support for the emulated /deep/ CSS Selector (the Shadow-Piercing descendant combinator aka >>>) has been deprecated to match browser implementations and Chrome’s intent to remove. ::ng-deep has been added to provide a temporary workaround for developers currently using this feature.

For the complete list of features and bugfixes please see the changelog.

Angular 4.2 Now Available

Angular version 4.2 has been released. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

What's new?

• Angular Forms now includes validators for min and max attributes
• You can now bootstrap a component directly by passing an element reference to the bootstrap method of an ApplicationRef
• Improved i18n tooling including MissingTranslationStrategy and location notes in xliff2 files
• We've begun laying the foundation for testing AOT components, which will become possible in a future release
• New compiler flag alwaysCompileGeneratedCode is available opt-in, and will be turned on by default in the future

For the complete list of features and bugfixes please see the changelog.

Angular Animations

We've added a huge number of new features to make working with Animations easier and more powerful. Some of these features were previewed at ng-conf 2017.

• Configure options and set input variables within animations
• Define reusable animations using animation()
• Query for inner elements within animations using query()
• Stagger multiple elements within an animation using stagger()
• Enable queried elements to trigger their own animations
• Orchestrate a full-blown animation when routes change
• Programmatically build/control an animation using AnimationBuilder

You can also read more about the thinking and detailed usage information for these features.

A new angular.io

Today we are also releasing a new angular.io website! We've rebuilt the site's infrastructure, architecture, and design using Angular under the hood. The site has the same content as before, but now the code and content live directly in the angular/angular repo under aio.

This site is the first step of a journey in two ways. First, we hope this rebuild will make it easier to accept public contributions to our documentation in the future. We're in the process of refactoring many of our documentation pages, and are excited to get your feedback and improvements after these changes launch. We're planning on adding an inline link to "improve this doc" on every page which will take you directly to GitHub where you can suggest changes.

Second, we hope that in in the future this site will serve as an example of some of the best practices for building Angular applications. Today the site is a Progressive Web Application and includes a Service Worker that increases repeat load performance.

Angular 4.1.0 Now Available

Angular version 4.1.0 - is now available. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

What's new?

• Version 4.1 adds full support for TypeScript 2.2 and 2.3. Developers previously reported good experiences with TypeScript 2.2 and 2.3, but Angular is now built with TypeScript 2.3. This does not affect our support for TypeScript 2.1 which shipped with 4.0.
• Angular is now compliant with TypeScript’s StrictNullChecks. This means that you can enable StrictNullChecks in your project, if desired.

For the complete list of features and bugfixes please see the changelog.

Angular 2.4.0 Now Available

Angular version 2.4.0 - stability-interjection - is now available. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is a drop-in replacement for 2.x.x.

What's new?

• This release updates our dependencies to the recently announced RxJS 5 stable

For the complete list of features and bugfixes please see the changelog.

Ok... let me explain: it's going to be Angular 4.0, or just Angular

This is a guest blog post by Juri Strumpflohner. Juri is a full-stack developer, architect and tech lead with a passion for frontend development, especially Angular. Juri writes technical articles on his personal blog and is the author of some online video courses. He also likes to engage and help the Angular community on Twitter, so follow him for more interesting news and articles around Angular and frontend web development. Juri was an attendee of NG-BE, Belgium’s first Angular conference last week and did a better job covering our announcements than we would have done, so we are cross-posting his blog post here.

Update: This blog was updated by the Angular team on 2017-01-26 to reflect the latest naming standards.

At the 8th and 9th of December 2016 was NG-BE, Belgium’s first Angular conference. Igor Minar (Angular lead dev) attended as the keynote speaker with some interesting announcements regarding Angular’s release schedule. Please read the entire post, there are a couple of important things.
Igor was extremely open and transparent about the announcement and even about the way of presenting it. He basically created the presentation openly the day before the conference:

I'll be conducting a major open source experiment at @ngbeconf tonight at 10pm downstairs in the main room. Come if you want to participate.

— Igor Minar (@IgorMinar) December 8, 2016

So here it is:

Why Angular 4?? Why even Angular 3?? What is going on?

Angular uses SEMVER

Back in September when the new Angular was finally released, the Angular team also announced they will switch to Semantic Versioning (SEMVER).
As the name already explains, Semantic Versioning is all about adding meaning to version numbers. This allows developers to not only reason about any upgrade we do, but we can even let tools such as NPM do it in a automatic and safe manner for us.
A semantic version consists of three numbers:

Whenever you fix a bug and release it, you increase the last number, if a new feature is added, you increase the second number and whenever you release a breaking change you increase the first number.

“A breaking change happens whenever you as a developer and consumer of a library, have to step in and adjust your code after a version upgrade.”

So what does this mean for the Angular team? As with every evolving piece of software, breaking changes will occur at some point. For example, giving a compiler error for existing application bugs that went unnoticed with the previous compiler version, anything, that will break an existing application when upgrading Angular, requires the team to bump the major version number.
Just to be clear, as also Igor mentioned in his talk. Right now, even just upgrading Angular’s TypeScript dependency from v1.8 to v2.1 or v2.2 and compile Angular with it, would technically cause a breaking change. So they’re taking SEMVER very, very seriously.

Breaking changes don’t have to be painful!

People that have been following the Angular community for a while, definitely know what I’m talking about. We went from Angular 1 to Angular 2, and it was a total breaking change, with new APIs, new patterns. That was obvious: ultimately Angular 2 was a complete rewrite. (Even though there are upgrade options for you available)
Changing from version 2 to version 4, 5, … won’t be like changing from Angular 1. It won’t be a complete rewrite, it will simply be a change in some core libraries that demand a major SEMVER version change. Also, there will be proper deprecation phases to allow developers to adjust their code.
Internally at Google, the Angular team uses a tool for handling automatic upgrades, even of breaking changes. This is still something that has to be planned in more detail, but the team is working hard on making this tool generally available, most probably in 2017 in time for version 5.

It’s just “Angular”

As you might have already guessed, the term “Angular 2” is also kind of deprecated once we get to version 4, 5 etc. That said, we should start naming it simply “Angular” without the version suffix.

“It’s just #angular”

Also, we should start avoiding GitHub/NPM libraries prefixed with ng2- or angular2-.

@toddmotto @manekinekko @jdfwarrior @schwarty but please don't call projects ng2- or angular2-, etc.

— Igor Minar (@IgorMinar) December 10, 2016

Naming guidelines

Basically from now on, you should name versions 2.0.0 or later of Angular simply “Angular”. Try to avoid using the version number, unless it is really necessary to disambiguate.

Three simple guidelines:

• Use “Angular” for versions 2.0.0 and later (e.g. “I’m an Angular developer”, “This is an Angular meetup”, “The Angular ecosystem is growing quickly”)
• Use "AngularJS" to describe versions 1.x or earlier
• Use the version number “Angular 4.0” "Angular 2.4" when needed to talk about a specific release (e.g. when talking about a newly introduced feature - “This is an introduction to feature X, introduced in Angular 4”, “I’m proposing this change for Angular 5”)
• Use full semver version when reporting a bug (e.g. “This issue is present as of Angular 2.3.1”)

All the docs - even for AngularJS - will be aligned to this in the coming weeks. Also in blog articles, courses, books, if you are targeting a very specific version of Angular for a reason, consider adding a header line which states that:

“This article uses Angular v2.3.1.”

That helps avoid confusion for your readers, especially when you are writing about specific APIs.

Why not version 3 then?

The core Angular libraries live in one single GitHub repository at github.com/angular/angular. All of them are versioned the same way, but distributed as different NPM packages:

Due to this misalignment of the router package’s version, the team decided to go straight for Angular v4. In this way again, all the core packages are aligned which will be easier to maintain and help avoid confusion in the future.
Also it is important to understand how Angular is being used and integrated inside Google (Igor speaks about this here in his keynote). All Google applications use Angular version equal to the current GitHub’s master branch of the Angular repository. Whenever a new commit lands in master, it will be integrated into Google’s single, giant mono-repo, where also other products such as Maps, Adsense etc. live. As a consequence all of the projects using Angular internally at Google will run their extensive test suites against this new version. This makes the team very confident to cut a new release, since it will contain the exact combination of versions of Angular packages that have been already battle tested inside Google. Thus, having aligned versions totally makes sense and makes it easier to maintain them over time, which in turn helps the team be more productive in releasing new features.

Tentative release schedule

The fact that breaking changes will arrive, doesn’t mean they will arrive every other week. The Angular team committed to time based releases that occur in three cycles:

• patch releases every week,
• 3 monthly minor release after each major release and
• a major release with easy-to-migrate-over breaking changes every 6 months.

The next 3 months will be dedicated to finalizing Angular 4.0.0.

After Angular 4.0.0, this will be the tentative schedule for further releases:

Video: See the announcement yourself

Conclusion

There are two main important messages here:

• don’t worry about version numbers
• we do need to evolve Angular in order to avoid another Angular 1 to Angular 2 change, but we should do it together as a community in a transparent, predictable and incremental way.

Also, I’d like to thank Igor for being so open at presenting this data, especially since he knows what a sensitive topic breaking changes are and have been in the past. This means a lot and I hope that the community will realize why all these changes are good for everyone involved.

Angular 2.3.0 Now Available

Angular version 2.3.0 - is now available. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is be a drop-in replacement for 2.x.x. This is the final minor release for 2.x.

What's new?

• We're now releasing the first version of the Angular Language Service. This is a service that is designed to integrate with IDEs and provide error checking and type completion within Angular Templates. We've built this service independent of editor, but we will soon be releasing an initial set of bindings for VS Code.
• Developers can now take advantage of object inheritance for components. Share or simplify component functionality by inheriting from a parent component.
• The latest release of zone.js includes improved stack traces. You should see stack traces that are shorter and are zone-aware:
• 2.2.x Stack Trace:
  Error.spec.js:53 Error: Inside at ZoneAwareError (zone.js:652) at insideRun (Error.spec.js:31) at ZoneDelegate.invoke (zone.js:216) at Zone.run (zone.js:100) at testFn (Error.spec.js:29) at ZoneDelegate.invoke (zone.js:216) at Zone.run (zone.js:100) at Object.eval (Error.spec.js:19)
• 2.3.0 Stack Trace:
  Error.spec.js:54 Error: Inside [InnerZone] at insideRun (Error.spec.js:31) [InnerZone] at Zone.run (zone.js:100) [<root> => InnerZone] at testFn (Error.spec.js:29) [<root>] at Zone.run (zone.js:100) [ProxyZone => <root>] at Object.eval (Error.spec.js:19) [ProxyZone]

For the complete list of features and bugfixes please see the changelog.

RC7 Now Available

Today we’re happy to announce that we are shipping Angular 2.0.0-rc.7. This small release is focused on bugfixes.

What's fixed?

• Lazy loading with webpack bundled projects
• RxJS issues for developers using ES5
• IDE Docs Integration - IDEs such as VS Code should now pull in the latest Angular Decorator documentation as reference

Read the full release notes

Angular in China and beyond: Introducing angular.cn

Please welcome Ralph Wang (汪志成) and Rex Ye (叶志敏), joining our blog as guest authors. Ralph is a developer, author, community lead, and Angular GDE in Beijing, China. Rex is an entrepreneur based in London. Together, they have led the first localization of angular.io for developers in China. We're excited to share the newly-launched angular.cn with you! Read on to learn how they did it, and how you can get involved in bringing Angular to your locale.  --Naomi Black,  Angular TPM

The language barrier does not stop Angular getting all the love from Chinese developers. There is new blood joining our community everyday. Some of them are newcomers, some of them have been using Angular in isolation for a long time without the support from the community. There are more than 4000 active users in our two Angular QQ chat groups, which is nothing compared to the sheer size of the whole Angular community in China. We felt that we needed to do more to enhance the influence of the community so that it could reach and help more developers.
语言的障碍并没有阻挡住中国的开发者们对Angular的热情。每天都有新人加入我们这个社区。他们有的是初学者、有的是在并没有社区支持的情况下自学了Angular很久的人。在我们两个Angular QQ群里，有4000千多名活跃的成员，但是他们仍旧远远比不上全中国Angular社区的巨大数量。我们认为我们需要加强Angular社区的影响，使得它能够影响到以及帮助更多的开发者。

We chose official document localisation as a starting point.
为此，我们选择了“翻译官方文档”作为突破口。

As a large open source project, Angular 2 is in continuous development and its documents will also be constantly updated. “Complete the localisation and leave it alone” obviously does not meet the requirement as a copy of an obsolete document could be misleading. We needed a new approach.
作为一个大型开源代码的项目，Angular 2处在不断的开发中，它的文档也将会被不断地更新。显然，“一次性翻译完，然后再也不管”的模式是无法满足需求的，一份过时的文档有时候甚至会误导读者。我们因此需要采用一种新的、能够保持持续更新的翻译方式。

The new approach we adopted is Git-based. We forked a copy of angular.io and appended the translations right next to each of the corresponding paragraphs. This way, our repository is structurally identical to angular.io. We can pull and merge any changes from angular.io easily and update our translations accordingly. Git has enabled our effective collaboration across time zones. We have created a script to hide the original text post compilation. It also allows our users to toggle the original text by simply clicking on the translated text, or by clicking the (Show English) button in the upper right corner. This is extremely handy for us and community contributors when it is time to review the work.
我们决定所采用的这种新的方式是基于GitHub的。我们开了一个angular.io库的分支，并把译文直接追加在原文之后，这样，我们资源库的架构将和angular.io的保持一致。当原文发生变更时，我们就会发现这种变化，并可以借助工具相对轻松的进行合并并及时更新译文。Github还让我们可以有效地实现跨时区的协作、也帮助协调我们两位译者的更新。填补了时区差别造成的无法及时交流的盲点。把这些源文件编译之后，我们增加了一个额外的js文件，它会按照格式上的规约，在运行期间把原文隐藏掉，还能通过点击译文来让原文重新显示出来。这种方式对于自己校对和社区的合作者协助校对至关重要。

After over a month of hard working, our localised docs site finally caught up with angular.io.
经过一个多月的高强度翻译，我们的翻译稿（并完成了第一遍校对）终于赶上了在angular.io上的官方文档的更新进度。

Without knowing anyone on the Angular team yet, we sent an email to Naomi in the evening, Beijing time. She was online early, California time, and replied right away. A few hours later, we were collaborating with the core Angular team and the project was officially under way . This is an interesting case of effective global collaboration. Ralph was in Beijing, Luke was in Shanghai, Rex was in London and Naomi was in San Francisco.
虽然我们并不认识Angular产品部门的人，但我们还是于北京时间的晚上给Naomi发了个邮件告知她我们的工作结果。加州还是当地的早晨，Naomi很快就给我们回复了热情洋溢邮件，并把我们介绍给了程路。几个小时后， 我们和Angular产品部门的核心团队的协作就开始了。这是个有趣的在全球范围内进行有效合作的案例。汪志成在北京、程路在上海、叶志敏在伦敦，而Naomi在旧金山。

We joined the Angular organisation on github,created the angular/angular-cn repository for our project, and were welcomed to Angular's doc authoring team on Slack so that we could speak to the authors directly regarding their articles and be informed of any future updates. This greatly increased the accuracy and timeliness of our translation. We were also able to contribute ideas to help the authors improve their articles.
不仅如此，Naomi还把我们加入了github上的Angular开发组，并在组下给我们建立了一个专门用作翻译的仓库。她还把我们加入了文档作者的slack小组，让我们可以与Angular开发组亲密接触，及时了解文档的写作及更改计划。这帮助我们避免了很多无用功，并能直接跟作者讨论对原文理解不透的地方，确保译文准确无误。反过来，我们也通过这个渠道，对多处原文提出了修改意见。

To ensure that developers in China would have consistent access from a locally-hosted official domain, Google China's Developer Relations team helped us to secure angular.cn and we launched the site. When we made our work known to our Chinese community, more than 10% subscribers instantly “liked” the news in Ralph’s personal WeChat channel. Many volunteers started to provide valuable feedback on our work, many of whom preferred to be kept anonymous.  All they wanted was the feeling of being able to contribute to the community. Our work has also attracted many new Angular developers to the the community.
为了帮助在中国的开发者们能够从基于国内的服务器方便地得到统一和一致性的资源使用，谷歌开发技术推广部的中国团队帮助我们获得了angular.cn的域名并发布了这个网站。当我们向社区通告了我们的工作成果，10%以上的成员们马上在汪志成的微信朋友圈中点了赞。很多志愿者开始向我们的工作提供回馈，他们中的很多人甚至都不愿意署名，他们所追求的只是为社区贡献力量的感觉而已。我们的工作还吸引了很多原本在Angular开发者社区之外的开发者们来加入我们这个社区。

Although we expected a positive response from the community according to our past experience with Angular 1, we were still surprised with the overwhelming praises and positive feedback received. Bear in mind that some developers were skeptical about Angular 2’s brand new design approach initially. It looks like Angular 2 has eventually won their heart.
虽然早就从Angular 1的经验中就对社区的正面反响有所期待，但是这个新的网站的发布以及获得的反应仍然超出了我们的想象。要知道，有些人对Angular 2的全新设计曾经是持怀疑态度的。看来，Angular 2的这些优异特性还是赢得了他们的心。

Our work has received great acceptance and recognition in the community. It has helped many developer teams overcome the language barriers. Many teams have started or are preparing to adopt Angular 2 in their projects. There are also a huge amount of developers starting to learn and play with angular 2 in their open source projects.  The Chinese Angular community has become more active than ever since the launch of angular.cn. More and more developers have become involved in the community by actively exchanging ideas and helping solve other people’s issues.
我们的努力和工作成果获得了开发者社区的接受和认可，它帮助了中国的开发者们克服了语言的障碍。已经有不少项目团队开始在筹备或使用Angular 2开发他们的项目，也有大批的开发者们在开始学习或尝试在他们的开源代码项目中使用Angular 2。自从Angular.cn网站发布之后，中国的Angular开发者社区变得更加活跃，越来越多的开发者们参与到我们的社区中来积极进行分享、交流、以及互相帮助解决开发问题。

We have also organised a team of Angular experts to translate the new ng-book 2. We will retain the same quality standard and we aim to publish the book shortly after the official release of Angular 2. We hope this will help Angular 2 take off to a flying start in China!
我们还组织了一个Angular专家团队来准备翻译并出版ng-book2。我们将坚持同样的质量标准和高效率，争取能在官方发布后不久就让本书面世，为Angular中文社区来一个开门红。

The workload for the localisation is not the lightest, however it has given us great sense of accomplishment and helped us build influence in our community. If you want to contribute and at the same time obtain recognition from the community, this is the opportunity you do not want to miss. If your local community is not yet strong, this could be the starting point to build a better and stronger one. Would you like to try replicating this effort for your language? The Angular team is looking for leads to bootstrap similar projects in other countries, and we would love to help you.
虽然翻译的工作确实相当繁重，但其成就感和影响力也同样非凡。如果你想付出努力并取得所属社区的认可，这将是一个难得的机会。如果你的社区尚且孱弱，这也是一个建设并发展它的绝好时机。你愿意为Angular技术文档的翻译工作提供你的贡献吗?  Angular产品部门正在寻找更多的志愿者们来做为其它国家市场类似的翻译工作，我们很期盼有更多的志愿者们来加入我们。

There is only one Angular community and that is the global Angular community. Let us work to build up our local communities and connect them together through the Angular team, to form an ever growing Angular community worldwide.
本质上，Angular只有一个社区，那就是全球社区。让我们大家一起努力和协作，建设好我们中国的Angular社区，并通过谷歌Angular产品部门的纽带，让它成为全球不断发展壮大的Angular社区的一部分。

One flower does not bring the spring, one tree does not make a forest. Only a prosperous community could make a technology succeed. The work we have done has not only brought us a great sense of achievement, more importantly it has helped form the building blocks of a stronger community. In this day and age, only a strong community can prevent a technology from becoming obsolete quickly. Only a strong community can help us get support from each other whenever we need. Only a strong community can feed the ever growing job market, which is crucial for business success. More importantly, in the process of building up our community, we will meet countless good friends - maybe, we are already friends, we are just waiting to discover each other.
一花不成春，独木不成林。只有繁荣的社区才能让一项技术发扬光大。我们所做的这些工作，除了给个人带来荣誉之外，更重要的是它有助于建设并保持一个强大的社区。只有强大的社区，才能让我们之所学不至于成为夕阳技术；每个人都有思维盲点，只有强大的社区，才能让我们在将来遇到问题时，可以向他人求助；而将来当我们无论是以技术骨干的身份还是以创业者的身份求贤若渴时，也只有强大的社区才能为我们提供源源不断的高质量的小伙伴儿。最重要的是，在建设社区的过程中，我们结识了很多原本陌生的朋友 —— 或许，他们原本就是我们的朋友，只是在世界的某个角落等待我们去发现而已。

Contributing to a strong community is the best way to pay back to the Angular team for their continuous investment in Angular.
贡献与一个强大的社区，也是我们对Angular产品部门做作的不断的投资所能给与的最佳回报。

If we can do it, you can!
我行，你也行！

Dear friends, we look forward to joining forces with you soon!
期待有一天能与你们胜利会师。

Ralph Wang and Rex Ye
汪志成 & 叶志敏

RC4 Now Available

Today we’re happy to announce that we are shipping Angular 2.0.0-rc.4. This release includes many bugfixes and improvements, and makes testing easier and more flexible.

What's new?

• We've cleaned up our exported APIs so that they are simpler and more streamlined, and removed things that were never intended to be public. We have also added stability tag filtering so that you can easily tell whether something is part of the stable released API or experimental.
• Consolidation and improvements to testing. For example, we no longer do special wrapping around Jasmine's it, describe, or other functions. This means we are no longer coupled to Jasmine, you can use another testing framework such as Mocha.
• We've added more Resources to help you learn and use Angular.

Read the full release notes

RC3 Now Available

Today we’re happy to announce that we are shipping Angular 2.0.0-rc3.

What's new?

• This release includes a fix for a major performance regression in RC2
• The @angular/router project has been merged into our main repository ( It will retain its own version numbers and release cycle )
• The Router documentation is now available. 
• Content Security - Angular Content Security features are feature-complete and documented
• The new Forms cookbook is available

Read the full release notes

Improvements Coming for Routing in Angular

A little more than a month ago, we introduced a new router at ng-conf. We hoped this would finally resolve the outstanding routing issues in our first design.

It turns out, routing is hard.

We’re grateful to have heard from many folks at ng-conf about flaws in this new design, so we are announcing version 3.0.0-alpha.3 of @angular/router and are deprecating version 2. You should begin using this router right away.

This router was built together with the @ngrx team. This router breaks compatibility with version 2 of @angular/router, but we believe it is a worthwhile successor to version 2 as well as to ngrx’s router.

Version 3.0

While the new version 3.0 of the router needs community validation and field-testing, we intend for this to become the primary router used by Angular applications. This router takes cues from both @ngrx/router router and UI-Router (a huge thank you to Chris for his work, he’s been working to make his ready for Angular 2).

What do I need to know?

1. Route configuration is now specified independently of components
2. Most [RouterLink] directives you have today will keep working
3. The version 3 router is ready to use, and more capabilities are coming
4. Read about the new router today in Victor Savkin’s Full Writeup on Routing
5. Official Documentation will be launched in the next two weeks

Get started by checking out this plunker, stay tuned for more about this Router, and the upcoming Angular 2 RC2.

---

Some backstory for the curious

During the alpha and beta periods of Angular 2, we developed a router (@angular/router-deprecated) that worked fine for many use cases, but had some fundamental problems. Deep linking into lazy loaded sections couldn’t work, our lifecycle hooks used for things like authentication were not compatible with DI, and it was impossible to inspect the whole router tree from a particular routable component.

To resolve these fundamental incompatibilities, in April we began work on a second version of the router (@angular/router 2.0) and rapidly released it as an incremental improvement at the ng-conf conference. Thanks to your input, we know that this new approach did not completely resolve the issues that set us down this path, so we went back to the drawing board and brought in more external collaborators. This path lead us to the latest version of the router we are announcing today.

Angular Material 2: Alpha preview!

On Tuesday, we released angular2-material alpha.0 - titanium-octopus, kicking off the public availability of the initial set of Angular Material 2 components.

What is Angular Material?

The goal of the Angular Material project is to build a set of reusable Angular components that implement Google's Material Design specification. We've already built a comprehensive set of these components with Angular 1; check out https://material.angularjs.org for demos and API docs. You can see these Angular Material 1 components in action on several Google products, such as Google Trends, Google Shopping Express, and your Google Search history.

Angular Material 2 vs Angular Material 1: What's different?

The new Angular Material 2 components are built completely new on top of Angular 2 so that they can take advantage of the improvements to both Angular and the web platform. We're also taking the lessons we learned building the current Angular Material to create something better than ever.

Can I use Angular Material 1 components in Angular 2 apps?

Sadly, no. To get the full benefits of Angular 2, you'll eventually need to upgrade to Angular Material 2.

We're working on cookbook examples to help you plan the upgrade from Angular Material 1 to Angular Material 2. These will be available closer to final release.

What does this alpha mean for Angular Material 1 Apps?

This new version for Angular 2 doesn't mean that Angular Material 1 is going away any time soon.

We know that many Angular 1 applications depend on Angular Material 1 for their UI, and that adoption of Angular 2 will take time. We are committed to both branches.

While bringing Angular Material 2 to feature parity, we are also actively working on maintaining and improving Angular Material 1, through regular minor and bugfix releases. We anticipate that Angular Material 1 will be supported for a long while.

What does the alpha process mean?

This alpha release is the first small step in an ongoing, rapid-iteration process. (So rapid, in fact, that we're already at alpha.1) Over the coming months, the team is going to be constantly adding new features, fixing issues, and incorporating community feedback. APIs will break, behaviors will change, and FABs will be flying everywhere! This process will let us hone-in on the best possible set of components for Angular 2 applications.

Check out angular/material2 on GitHub for more information on how to try out the new Angular 2 components, and stay tuned here and on Twitter for future announcements!

Angular 1.5.0 - ennoblement-facilitation has been released!

We have just released the next major version of Angular 1, which has been in development since May last year.
The primary theme for this release was to improve the upgrade path to Angular 2.
In this release we have added features that will enable developers to write Angular 1 applications that are closer to the way that applications are structured in Angular 2.

New Features

The big feature changes to Angular 1 in this release are mostly focused around supporting Angular applications that are built from Components. But there are a number of other features that will improve your development experience.

Component-based applications

Defining component directives

While creating components in Angular has been the primary way of structuring applications for a long time, we now made it possible for you to easily define a component directive with the module.component() helper method. For example a simple component only needs to provide a template, some bindings and a controller. For the remaining directive options we set sensible defaults.

myModule.component('myComponent', {
  template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>',
  bindings: { firstName: '<', lastName: '<' },
  controller: function() {
    this.getFullName = function() {
      return this.firstName + ' ' + this.lastName;
    };
  }
});

<my-component first-name="'Alan'" last-name="'Rickman'"></my-component>
Read the new component guide to find out more about this.

Lifecycle hooks

If your directive/component controller has a method called $onInit() the compiler will now call it after the component has been initialized and all its bindings have been set up. This provides a clear place to put the initialization code for your components and is similar to the ngOnInit() lifecycle hook of Angular 2.

Binding to required directives

As well as the string and array forms, you can now specify an object for the require property of directives and components. If used with bindToController, the compiler will also automatically bind these required directive controllers to your controller.
These bindings (including those of sibling directives) are guaranteed to be in place by the time the $onInit() hook is called.

Multi-slot transclusion

You can now specify that different parts of the transcluded content is rendered at different slots in the template. See the 1.5.0-beta.2 release announcement for a detailed explanation of this feature.

Default transclusion content

ngTransclude no longer overwrites its contents if there is no content to fill it. This means that you can provide default content to be shown if the user of your directive has not provided any content to be transcluded.

One-way bindings

You can now define a directive/component binding using the '<' character to indicate that the binding is one-way. In this case the compiler will only set up a watch on the outer expression and not on the internal property. This means that changes to the value of a binding inside the component will not be propagated to the outside. See the $compile API docs for more information.

Improved support for ES6 classes

We now support instantiation of native ES6 classes in the $injector and as a controller. Due to variable browser support this is a volatile feature, so be careful to test on your target browsers before going to production.

ngAnimateSwap Directive

We have introduced the new ngAnimateSwap directive, which allows you to animate a collection of DOM changes together as a single container swap. See the 1.5.0-beta.2 release announcement for a detailed explanation of this feature.

ngResource

We now have proper support for cancellable actions on resources, which means a $cancelRequest() method will be available on the return value of the request method.

ngRoute

Any promises resolved as part of a route's resolve property are now added to the scope as a $resolve property, which saves you having to inject them into the route controller.

Other Improvements

There are loads of other improvements, which you can find in the Angular changelog. Here are a few highlights:

• You can now access the locals object that was passed to a call to $parse from inside the parsed expression, via a $locals variable.
• You can provide $http configuration options of the $templateRequest service.
• You can create your own custom XHR objects for the $http via the $xhrFactory service.
• ngModel now provides ng-empty and ng-not-empty CSS classes.
• The ngAria module is now more precise with handling of ARIA attributes and tabindex for custom controls.
• Some new helpers are available on ngMock to ease testing:
• $componentController,
• $httpBackend.expectRoute()/whenRoute(),
• $animate.closeAndFlush().

Security Improvements

There have been a number of people who have contributed to the project over the last few releases by analyzing and identifying security issues in the Angular code base, which we have then fixed. We really appreciate the work that these people do. In particular we would like to thank Mario Heiderich, Gareth Heyes and Jann Horn and the security team at Google.

Migrating from 1.4 to 1.5

Angular 1.5 is the fastest, most feature complete and reliable version of Angular to date. We highly recommend upgrading your applications to use it.
While we tried to keep the number of breaking changes in the core to a minimum a few were unavoidable and will generally only affect very rare corner cases.
You can read about how to migrate and what breaking changes might affect your application in the migration guide.
If you find any issues with Angular while you are migrating, please report them at Github.

Thanks

Once again, Angular could not be what it is without the constant support of the literally millions of developers across the world who are using and contributing to the project, either through submitting issues and pull requests, running conferences and workshops, writing tutorials and sharing their real world experiences.

From everyone at the Angular team, we hope you enjoy developing with this latest version as much as we have enjoyed building it.

Angular 2: an MIT Open Source Licensed Framework

Guest-blogger Max Sills is an attorney in Google's Open Source Office, and our expert on all things legal related to Angular.  Enjoy!  - Naomi

As of beta.2 this week, we're moving Angular 2, its related libraries, and any code snippets and examples to the MIT license.

Open source licenses are meant to protect developers by making it clear how code can be used. We want developers to be confident that they can use, fork, modify, and extend Angular without worry.

At Google we prefer to license new projects under the Apache 2 license because we feel it gives the most rights to developers and creates a strong legal scaffold for projects to grow and thrive. However, what we've heard from users in the Angular community is that you prefer the MIT license. It's more widely used within JavaScript projects, it's shorter, and it’s better understood.

So, we're changing Angular back to the MIT license.

Happy coding.

Angular 2 Beta

We're ecstatic to announce that we've reached Angular 2 Beta.  You can read about many of the improvements over Angular 1 in a recent post.  Get started learning Angular 2 now at angular.io.

What does 'beta' mean?

Beta means we're now confident that most developers can be successful building large applications using Angular 2.

Through developer preview and alpha we've worked closely with several large projects here at Google including AdWords, GreenTea (Google's internal CRM system), and Google Fiber.  In fact, just a few weeks ago we saw Google Fiber launch on their new Angular 2 code base.

Externally, we've worked closely with several other teams integrating with Angular 2 including Ionic Framework on Ionic 2, Telerik on NativeScript, Rangle.io on Batarangle, and many others.

We've incorporated the majority of feedback from these teams that would create breaking changes.  Given this, we're looking forward to other teams developing in earnest and telling us how we can help.

Getting Started

Get going now with the updated and expanded Quickstart and Tutorial on angular.io.  From there, you can check out several developer guides and a handy cheatsheet covering the main features in Angular 2.

While the many in-progress Angular 2 books and courses will likely take a few weeks to catch up to the latest changes, we can recommend taking a look at the clear explanations and examples on the thoughtram blog and this in depth primer on Angular 2.

Upgrading from Angular 1

You may have an Angular 1 app today and you want to start writing Angular 2 code in that app, without changing your working/tested angular 1 code. This is where ngUpgrade comes in.

While you can upgrade apps in a "big bang" approach where you halt production until everything is rewritten, we're supporting two paths for where teams want to upgrade their Angular 1 apps to Angular 2.

ngUpgrade

We know many of you made large investments in Angular 1 and have created some awesome apps. We created ngUpgrade for all of you to make it possible to leverage your existing apps and move forward with Angular 2.

ngUpgrade lets you mix Angular 2 into your existing Angular 1 application.  You'll get to take advantage of Angular 2's improved speed and APIs immediately as you replace components a bit at a time over the course of your releases.  Learn more in this article from thoughtram and the upgrade guide in our docs.

ngForward

Some teams, with apps that are more sensitive to download size, will want to avoid having both Angular 1 and Angular 2 libraries running in their app simultaneously.  For this, we have ngForward which lets you write Angular 1 applications in the syntax of Angular 2.  This lets your team get used Angular 2 conventions and styles in your apps today and shorten the distance to doing the full upgrade to Angular 2 when you're ready.

Providing Feedback

As always, please submit issues via GitHub, questions on Stack Overflow, and join the live conversation on Gitter.

We've also recently added a mechanism for submitting feedback for all pages.  Just click on the exclamation point icon in the upper right of the page and tell us what could be improved.

What comes next?

We're already hard at work on the set of improvements to move Angular 2 to its full and final release.  While we will make many small improvements, the big ones for final are:

1. Reducing Angular 2's payload size.
2. Making the Angular CLI usable end to end throughout the development process.
3. Creating a more developer-friendly route definition and link API for the Component Router.
4. Support for animations.
5. I18n and L10n support.

And there are even more cool things to come -- some we've already started on including:

1. More documentation, particularly around ES5/ES6 usage.
2. Even better startup and runtime performance
3. An architectural style guide
4. Unit and end-to-end testing improvements
5. More support for mobile web and installable mobile apps
6. Material Design components for Angular 2
7. A tools platform for deep IDE support
8. Better support for ES6 and Babel

Thanks, and we're looking forward to seeing the apps you build appear on madewithangular.com!

Angular 1.4.0 - jaracimrman-existence

Angular 1.4.0 has arrived! This is a truly community driven release.

This release brings many feature enhancements and performance improvements, while at the same time introducing as few breaking changes as possible. For apps following best practices, we expect the migration from Angular 1.3 to 1.4 to be smooth and the list of breaking changes is documented in the migration doc.

We started work on 1.4 in November last year. The features and issues we concentrated on were guided by an analysis of feedback from developers using the framework in real projects. The planning was done in public, see the planning spreadsheet and video of the planning meeting. The weekly meeting minutes are available online.

New Features

In over 400 commits, we have continually improved the docs, fixed more than 100 bugs, and added over 30 features. Here is a rundown of the new things you can benefit from in this release.

Animation

Matias completely refactored animations, giving it more powerful features and squashing tons of edge-case bugs at the same time. This code overhaul is backwards compatible, except for a small number of documented api changes. This refactoring makes it possible to imperatively control CSS-based transitions/keyframes via a new service called $animateCss. We can now also animate elements across pages via animation anchoring.

• Complete refactor of internal animation code (c8700f04)
• CSS-driven Javascript animations (see docs)
• Better support for animation callback events (see docs)
• Move elements between views with animation anchoring (see docs)
• Provide support for animations on elements outside of $rootElement via $animate.pin() (e41faaa2)

$http

Pawel did some great work fixing outstanding issues in the $http service and also implemented a mechanism for providing custom URL parameter serialization, so now it is easy to connect to end-points that expect parameters to follow the jQuery-style parameter serialization.

• support custom params serializers (including a new jQuery-style serializer) (6c8464ad, #3740, #7429, #9224, #11461)
• provide a config object as an argument to header functions (d435464c, #7235, #10622)

Internationalization

Chirayu worked hard on improving i18n support for Angular apps. The first piece of this work was to provide a new ngMessageFormat module that supports the ICU MessageFormat interpolation syntax.

• extend interpolation with MessageFormat like syntax (1e58488a, #11152)
• Add FIRSTDAYOFWEEK and WEEKENDRANGE properties in the ngLocale data (3d149c7f)

Compiler related

To complement our push towards more use of `controller as` syntax in our component directives, Caitlin added support for binding a directive's element attributes straight onto the directive's controller.

• allow using bindToController as object, support both new/isolate scopes (35498d70, #10420, #10467)

Cookies

Shahar had stepped up to implement the much needed overhaul of the ngCookies module. The $cookieStore has been deprecated and its functionality moved over to the $cookies service, which now has a much cleaner interface. He also implemented the frequently requested feature to set cookie options for individual cookies as well as configuring the defaults via $cookiesProvider.

• $cookies:
• allow passing cookie options (92c366d2, #8324, #3988, #1786, #950)
• move logic into $cookies and deprecate $cookieStore (38fbe3ee, #6411, #7631)
• $cookiesProvider: provide path, domain, expires and secure options (53c66369)

Form Related

Matias was at it again, this time adding dynamic message support to the ngMessages directive, which makes it much easier to display messages requested at runtime from the server.

• ngMessages: provide support for dynamic message resolution (c9a4421f, #10036, #9338)

ngOptions was completely refactored to allow a number of annoying bugs to be fixed, it also now supports disabling an option using the `disabled when` syntax, thanks to Stephen Barker.

• ngOptions: add support for disabling an option (da9eac86, #638, #11017)

Shahar added improved support for specifying the timezone on date/time input elements that are using ngModel.

• ngModel: support conversion to timezone other than UTC (0413bee8, #11005)

jQuery related

Michel Boudreau worked with Michał to allow us to specify exactly which version of jQuery (if any) we want Angular to use. This option also allows developers to instruct Angular to always use jqLite even if jQuery is present on the page, which can significantly improve performance for applications that are doing a lot of DOM manipulation via Angular's templating engine.

• ng-jq: adds the ability to force jqLite or a specific jQuery version (09ee82d8)

Accessibility

Marcy Sutton continued to improve the accessibility of apps built with Angular with new features in the ngAria module:

• automatically add button role to ngClick (bb365070, #9254, #10318)
• automatically add roles to custom inputs (29cdaee2, #10012, #10318)

Filters

We tweaked and improved a number of the filters. Shahar did some nice work to bring better timezone support to the date/time filters; Tamer Aydın helped to add a start index to the limitTo filter; Georgios completely rebuilt the filter filter to be able to compare with deep objects; and Quentin improved the support for infinity in the number filter.

• number filter: display Infinity symbol when number is Infinity (51d67742, #10421)
• date/time filters: support conversion to timezone other than UTC (c6d8512a, #10858)
• limitTo filter:
• extend the filter to take a beginning index argument (aaae3cc4, #5355, #10899)
• ignore limit when invalid (a3c3bf33, #10510)
• filter filter:
• compare object with custom toString() to primitive (f8c42161, #10464, #10548)
• correctly handle deep expression objects (f7cf846045, #9597)
• allow array like objects to be filtered (1b0d0fd8, #11782, #11787)

Testing

• ngMock:
• $exceptionHandler: log errors when rethrowing (deb3cb4d, #10540, #10564)
• annotations: cleanup $inject annotations after each test (0baa17a3 & 6ec59460)
• $controller: allow mock $controller service to set up controller bindings (d02d0585, #9425, #11239)
• Travis:
• run unit tests on iOS 8 (2cdb2016, #11479)
• Benchmarks:
• add ngModel benchmarks to largetable-bp (b8dbdb0c, #11082)

Miscellaneous

Other features and improvements that are part of this release include:

• angular.merge:
• provide an alternative to angular.extend that merges 'deeply' (c0498d45, #10507, #10519)
• angular.Module:
• add decorator method for creating service decorators (e57138d7, #11305, #11300)
• $anchorScroll:
• allow scrolling to a specified element (731c8b5e, #4568, #9596)
• ngClass:
• add support for conditional map within an array (4588e627, #4807)
• $timeout:
• allow fn to be an optional parameter (5a603023, #9176)
• pass additional arguments to the callback (3a4b6b83, #10631)
• $interval: pass additional arguments to the callback (4f1f9cfd, #10632)
• $resource:
• include request context in error message (266bc652, #11363)
• Scope:
• remove history event handler when app is torn down (d996305b, #9897, #9905)
• CommonJS:
• The new optional CommonJS support makes using Angular modules in environments like npm and browserify easier.

Performance Improvements

Lucas proposed and implemented a complete rewrite of the Angular expression parser. The new parser is easier to maintain and up to 25% faster. On top of that change we have also speeded up scope watching, the compiler and ngOptions.

• $parse:
• new and more performant parser (0d42426)
• $compile:
• replace forEach(controller) with plain loops (5b522867, #11084)
• avoid .data when fetching required controllers (fa0aa839)
• ngOptions:
• only perform deep equality check on ngModel if using track by (171b9f7f, #11448, #11447)
• only watch labels if a display expression is specified (51faaffd)

What's next?

There were two features that were pulled out of the 1.4 release. The component helper (#10007) and the component oriented hierarchical router. The main reason for this decision was that both of these deliverables were not ready for the important task of simplifying the migration path from Angular 1 to Angular 2. Rather than delay the 1.4 release further, we decided to move these two deliverables into the 1.5 release.

The 1.5 planning is already underway, with the Component Router and component helper among the initial seeds. As before, the planning meeting will be published online. In this meeting the areas of focus and prioritization will be picked. At ng-conf we announced that the future focus of the 1.x releases will be migration path to Angular 2, so you can expect many of the deliverables to be in this area.

Thanks

This Angular version is the first to be run by a much broader community oriented team, including many people from outside of the Google Angular team such as Lucas, Martin, Shahar, Pawel, Michał, Georgios and Jason. These are people who are using Angular on a day-to-day basis in real, often large applications. They have worked tirelessly week after week to help get this release out. On top of these core team members, a number of other people from the community have contributed significant code to this release, or helped to review issues and pull requests. We'd like to thank them all.