Блог

Главная - Вопросы по программированию - Могу ли я привязать модель AngularJS к URL-адресу с хэшем и вводу HTML одновременно?

Могу ли я привязать модель AngularJS к URL-адресу с хэшем и вводу HTML одновременно?

#angularjs

#angularjs

Вопрос:

Я изучаю Angular и просмотрел ряд примеров, которые показывают, как привязать модель к вводу HTML, чтобы они всегда содержали один и тот же текст.

Я понимаю, что Angular также предоставляет службу $location, которая работает с URL.

У меня есть приложение, которое я подумываю частично переписать в Angular в качестве учебного примера.

В моем примере у меня есть ввод HTML, который я синхронизирую с моделью с помощью jQuery, а также синхронизирую с URL-адресом с хэшем.

Есть ли простой способ добиться этого с помощью AngularJS?

Рассмотрим пример приложения, приведенный ниже:

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script>
        var myApp = angular.module('myApp', []);

        function FirstController($scope, $location) {
            var data = {
                bar: 'hello world'
            };
            $scope.data = data            
        }
    </script>
</head>
<body>
    <div ng-app="myApp">

        <div ng-controller="FirstController">
            <input ng-model="data.bar" />           
            <h2>{{ data.bar }}</h2>
        </div>
    </div>
</body>
</html>

Это простой пример, показывающий, как модель можно синхронизировать с текстовым полем. Мне было интересно, возможно ли синхронизировать ее с URL-адресом с хэшем, чтобы у нас было http://www.example.com#bar=What_The_User_Typed

Ответ №1:

Что вам, вероятно, нужно, так это $routeProvider

https://docs.angularjs.org/tutorial/step_07

Комментарии:

1. Похоже, документация изменилась. Теперь это может быть правильный адрес … docs.angularjs.org/tutorial/step_09

2. Если у вас одностраничное приложение, зачем вам создавать маршруты? Просто обновите хэш $location правильно?